CourtBouillon − CSS Tricks: <code>leader()</code>

CSS Tricks: `leader()`

If you ever tried to create a beautiful table of contents, you may have tried to include leaders. Leaders? Yes, these small dots you put between a chapter’s title and its page number.

Table of Content with dots between chapter titles and page numbers — Table of Content with dots

#toc a::after {
  content: leader(dotted) target-counter(attr(href), page);
}

This property will work well in an HTML structure like this one:

<ol id="toc">
  <li><a href="#chapter1">My First Chapter</a></li>
  <li><a href="#chapter2">Second</a></li>
  <li><a href="#chapter3">The Last Chapter Very Long</a></li>
</ol>

Leaders are not simple dots. If you look at them carefully, you’ll find that they actually have superpowers. Your title is too long or too short? You’ll get more or less dots. They can even handle the cases where your title and your page number are too large to fit on one line. Even more important: they’ll always be aligned with each other. Wow, that’s magic!

Of course, you can decide to replace dots with other characters:

#toc a::after {
  content: leader('_') target-counter(attr(href), page);
}

Table of Content with underscores between chapter titles and page numbers — Table of Content with underscores

Learn more about leaders: