Text leaders are lines of dots, dashes, or other characters that create a visual link between elements on a page. Sometimes, they're called line leaders or dash leaders. They're often used in tables of contents or indexes to connect section titles to their corresponding page numbers:
While difficult to make in web browsers and most open-source HTML to PDF libraries, DocRaptor's HTML to PDF API fully supports the CSS Generated Content specifications that make leaders a breeze to create.
Inserting a Leader
To add leaders and page references to a table of contents, simply add the leader()
function within the content
property of a pseudo element, like this:
#table_of_contents a::after {
content: leader('.') target-counter(attr(href), page);
}
The example above combines a leader with the target-counter()
function for creating cross-references.