<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table of content</title>
<style>
@page {
size: A5;
margin: 20mm;
@bottom-right {
content: 'Page: ' counter(page) ' of ' counter(pages);
font-size: 0.7em;
}
}
@page cover {
size: 148mm 55mm;
background: red;
counter-reset: page -1 pages -1;
@bottom-right {
content: none;
}
}
#cover {
page: cover;
text-align: center;
color: white;
font-weight: bold;
font-size: 3em;
}
h2 {
break-inside: avoid;
break-after: avoid;
}
p {
text-align: justify;
}
.pages {
content: counter(pages)
}
#toc {
padding: 0 0 0 15mm;
break-after: page;
}
#toc ol {
padding: 0;
}
#toc > li > a {
font-weight: bold;
}
#toc li {
margin: 2mm 0;
padding: 0;
}
#toc li::marker {
content: counters(list-item, '.') '. ';
}
#toc a {
text-decoration: none;
}
#toc a::after {
content: leader(' .')
'\205F('
target-counter(attr(href url), page)
')';
}
</style>
</head>
<body>
<div id="cover">COVER</div>
<h1>Table of content example</h1>
<p>A simple table of content example.</p>
<ol id="toc">
<li><a href="#topic1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#topic2">Stet clita kasd gubergren</a>
<ol>
<li><a href="#topic2.1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#topic2.2">Stet clita kasd gubergren</a></li>
</ol>
</li>
<li><a href="#topic3">At accusam aliquyam diam</a>
</li>
<li><a href="#topic4">Class aptent taciti sociosqu ad litora</a></li>
<li><a href="#topic5">Pellentesque sit amet tortor fringilla</a></li>
</ol>
<h2 id="topic1">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac tempor orci, in pharetra leo.
Aliquam rhoncus vulputate turpis. Vestibulum sed eros eu dolor pellentesque suscipit. Sed vitae elit dui.
Sed finibus eleifend rhoncus. Curabitur aliquam interdum elit, ut dignissim lorem facilisis eu. In hac habitasse
platea dictumst. Quisque at dui ante. Suspendisse et tortor aliquam enim tristique viverra vitae et risus. </p>
<h2 id="topic2"> Stet clita kasd gubergren</h2>
<p>Nam at ligula lacinia, pretium ante eget, euismod neque. Curabitur vitae lectus nisl. Nullam finibus quam
justo, ac interdum arcu congue a. Proin finibus imperdiet semper. Aliquam ac lacus quis sem accumsan gravida vel a
diam. Pellentesque sed ex mollis, sagittis massa quis, tempus libero.</p>
<h3 id="topic2.1">Proin finibus imperdiet semper</h3>
<p> Etiam venenatis elit eget quam consectetur
tincidunt. Aenean sed justo faucibus, vulputate lorem eget, malesuada nulla. Nullam interdum, ante eget elementum
pulvinar, nulla nunc sodales tellus, sit amet porta odio orci a ex. Morbi ullamcorper urna non lectus faucibus
fringilla nec a eros. Duis euismod congue lacus in luctus. Sed elementum vitae diam sed consectetur. Praesent id
varius nisi. Aenean placerat tristique ex. </p>
<h3 id="topic2.2">Class aptent taciti sociosqu</h3>
<p> Etiam venenatis elit eget quam consectetur
tincidunt. Aenean sed justo faucibus, vulputate lorem eget, malesuada nulla. Nullam interdum, ante eget elementum
pulvinar, nulla nunc sodales tellus, sit amet porta odio orci a ex. Morbi ullamcorper urna non lectus faucibus
fringilla nec a eros. Duis euismod congue lacus in luctus. Sed elementum vitae diam sed consectetur. Praesent id
varius nisi. Aenean placerat tristique ex. </p>
<h2 id="topic3">At accusam aliquyam diam diam dolore dolores</h2>
<p>Curabitur egestas mauris non fringilla maximus. Integer eleifend consequat nisl et porta. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eget ipsum in lorem consectetur
vehicula. Integer porta felis a malesuada lobortis. Quisque vulputate ligula non enim rutrum tempor. Suspendisse
eget sapien lectus. Aenean non mattis felis. Aliquam eget iaculis augue, et placerat magna. Donec vestibulum lectus
ut laoreet condimentum. </p>
<h2 id="topic4">Class aptent taciti sociosqu ad litora</h2>
<p>Nam auctor malesuada blandit. Nam tincidunt, massa at sodales interdum, elit justo iaculis libero, quis varius
sem nibh id purus. Duis rhoncus volutpat laoreet. Suspendisse imperdiet erat eget purus lacinia, id finibus magna
scelerisque. Morbi malesuada convallis vestibulum. Etiam rutrum eget mi eu venenatis. Donec eget egestas ligula,
id feugiat dui. Praesent a magna vel justo molestie bibendum in quis ligula. Etiam sodales nunc et libero aliquam
faucibus sit amet non eros. Vivamus pellentesque neque id molestie fringilla. Integer gravida ultricies efficitur.
Integer in nibh sit amet turpis fermentum gravida. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Morbi elementum volutpat sem, vel fermentum ligula molestie gravida. </p>
<h2 id="topic5">Pellentesque sit amet tortor fringilla</h2>
<p>Aliquam erat volutpat. In varius nibh sit amet tempor auctor. Quisque massa ipsum, ornare at augue vel, bibendum
condimentum purus. Sed fringilla consectetur velit, eget dapibus mi gravida id. Ut eget tincidunt lacus.
Quisque leo velit, aliquam in orci a, dignissim molestie ex. Nunc vulputate est sit amet lacus sagittis, sit
amet condimentum nunc blandit. Donec varius lacus laoreet, posuere purus eu, mollis risus. Pellentesque
facilisis nibh nec feugiat blandit. Nunc a lacus at purus porttitor aliquet vel ac nisi. Nullam sit amet nisl at
quam molestie ornare. Pellentesque sit amet tortor fringilla, facilisis nisl vitae, porta est. </p>
</body>
</html>
