CSS Dot Leaders in Table of Content

Shuqi Khor
3 min readSep 14, 2023

--

Dot leaders are a row of dots that connect chapter titles to their corresponding page numbers, commonly found in table of content and index pages. Just like this:

And I think they’re pretty.

Here’s 2 ways to do it dynamically in CSS.

First thing first, let’s split them into 3 sections: left, dots and right:

<div class="entry">
<div class="left">Left</div>
<div class="dots"></div>
<div class="right">Right</div>
</div>

Now let’s make the container a flex box:

.entry {
display: flex;
width: 100%;
}

At current stage, the left and right texts are still sticking together. To push them to both sides, you need to set the dot container to the maximum width:

.dots {
width: 100%;
}

Since that they are inside a flex box, the widths will be adjusted automatically.

Now that the layout is set, we could start working on the dots.

Method 1: Radial Gradient

Imagine — first, we draw one single circle (a dot) in the background with radial-gradient. Then we have it repeat horizontally with background-repeat.

.dots {
width: 100%;
background: radial-gradient(circle at 50% 0.8em, #999 8%, transparent 8%);
background-size: 0.5em;
background-repeat: repeat-x;
}

And viola! Quick and easy.

The Pros

  • Complete control over individual dot size and gaps.

The Cons

  • Some dots may be cut in half.
  • When zoomed in, the dots are not very sharp.
Blurred dots and half dots

Method 2: Text and Overflow Clip

This may sound bizarre, but if you know how many dots will surely occupy that space, just type them in!

.dots {
height: 1em; /* very important */
overflow: hidden; /* very important */
word-wrap: break-word; /* where magic happens */
color: #999;
letter-spacing: 5px;
}

.dots:after {
content: '...........................................................';
}

The Pros

  • No more half dots! Thanks to word-wrap: break-word which wraps overflowed dots to the next line (which is hidden).
  • Crystal clear when zoomed in.

The Cons

  • Less control over the appearance of the dots.
  • You may get square dots depending on the font.
  • If unlucky, you may not have enough dots to cover the area.
Square dots

That's it, hope you like it!

--

--