HTML
<div class="headerLeft"> Counter and Cross References </div> <div class="headerRight"> A sample document </div> <div class="footerLeft"> <img src="https://printcss.live/img/logo.png" /> </div> <div class="footerRight"> <a href="mailto:info@azettl.net">info@azettl.net</a><br /> <a href="https://printcss.live/">printcss.live</a> </div> <div class="content"> <h1>PrintCSS: Target Counters</h1> <a href="#marker">Target Counters</a> <OL> <!-- {item[0]=0 --> <LI>item</LI> <!-- item[0]++ (=1) --> <LI>item <!-- item[0]++ (=2) --> <OL> <!-- {item[1]=0 --> <LI>item</LI> <!-- item[1]++ (=1) --> <LI id="marker">item</LI> <!-- item[1]++ (=2) --> <LI>item <OL><!-- {item[2]=0 --> <LI>item</LI> <!-- item[2]++ (=1) --> <LI>item</LI> <!-- item[2]++ (=2) --> </OL> </LI> <!-- } --> <LI>item</LI> <!-- item[1]++ (=4) --> </OL> <!-- --> </LI> <!-- } --> <LI>item</LI> <!-- item[0]++ (=3) --> <LI>item</LI> <!-- item[0]++ (=4) --> </OL> <!-- --> <OL> <!-- }{item[0]=0 --> <LI>item</LI> <!-- item[0]++ (=1) --> <LI>item</LI> <!-- item[0]++ (=2) --> </OL> <!-- --> </div>
CSS
@page{ size: A4; margin: 20mm; @top-left{ content: element(headerLeft); border-bottom:2px solid #434190; } @top-center{ border-bottom:2px solid #434190; } @top-right{ content: element(headerRight); border-bottom:2px solid #434190; } @bottom-right { content: element(footerRight); border-top:2px solid #434190; } @bottom-center{ content: counter(page) ' / ' counter(pages); border-top:2px solid #434190; font-size:8pt; } @bottom-left{ content: element(footerLeft); border-top:2px solid #434190; } } .headerLeft{ position: running(headerLeft); font-size:12pt; } .headerRight{ position: running(headerRight); font-size:8pt; font-style: italic; text-align: right; color:#667eea; } .footerLeft{ position: running(footerLeft); } .footerLeft img{ width:20mm; } .footerRight{ position: running(footerRight); text-align: right; font-size:8pt; } .content a::after { content: ", see section " target-counters(attr(href, url), item, ".") } #marker{ color:red; font-weight:bold; } OL { counter-reset: item } LI { display: block; counter-increment: item } LI:before { content: counters(item, ".") " "; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)