2019.2

Step 4: Styling the table of contents
Each component of the table of contents inserted in Step 3 is wrapped in a <span> element that
has a class, for example: "dots" or even multiple classes: "toc-entry h1". (Class names are
separated by a space.)
These classes can be used to style the table of contents with CSS. The principles of styling
with CSS are explained in another topic: "Styling templates with CSS files" on page287.
Add the following styles to the style sheet for the Print context (see "Step 1: edit CSS" on
page292) to align the page number to the right and fill the space between the text and the page
number with leader dots.
p.toc-entry {
display: flex;
margin: 0 0 0.25em 0;
}
p.toc-entry .text {
flex-shrink: 0;
}
p.toc-entry .dots {
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
p.toc-entry .dots::after {
font-weight: normal;
content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
p.toc-entry .number {
flex-shrink: 1;
text-align: right;
font-weight: bold;
}
Page 433