HTML to PDF Leaders with CSS

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.