10. Leaders

Leaders are often used to draw a visual connection between an entry in a table of contents or similar structures, and a corresponding value.

In CSS, drawing leaders is accomplished via the use of the leader() function. This function accepts the following values:

leader(dotted)

leader(solid)

leader(space)

leader(<string>)

A leader may be added using the content property, and can be freely combined with other generated content such as counters.

Example: adding leaders to the entries in a table of contents.

a.toc_ah2:after{
         content: leader(dotted) " " target-counter(attr(href), page);
}

This may result in a display such as: