<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page counters</title>
<style>
@page {
size: 100mm 150mm;
margin: 10mm;
@bottom-right {
content: 'Page: ' counter(page);
font-size: 8pt;
}
}
h2 {
break-inside: avoid;
break-after: avoid;
}
.pages {
content: counter(pages)
}
#toc > li::after {
content: ' (page: ' target-counter(attr(href url), page) ')';
display: inline;
}
</style>
</head>
<body>
<h1>Page counter(s)</h1>
<p>The page counter lets you display the current page number or the total number of pages. This can be used even with
a text flow, for example, this document hast <span class="pages"></span> pages.</p>
<p>Another lovely CSS feature is the target-counter() function, which gives you back the page number at which an element
is first displayed. Combined with the attr() function, you can get the page number for different elements based on the
on a attribute. This lets you create simple table of contents with the page number.</p>
<ol id="toc">
<li href="#topic1">The rise of pudding</li>
<li href="#topic2">The fundamentals of pudding</li>
<li href="#topic3">Major historical pudding events</li>
<li href="#topic4">Famous people who don't lie pudding</li>
<li href="#topic5">Why pudding?</li>
</ol>
<h2 id="topic1">The rise of pudding</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">The fundamentals of pudding</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. 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">Major historical pudding events</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">Famous people who don't lie pudding</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">Why pudding?</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>
