Here is an example of how my CSS code is structured:
.page-number:after { counter-increment: page; }
If we were to display 6 pages, it would look something like this:
.page-number:after {
content: 'Page ' counter(page) ' of';
}
I am trying to figure out a way to store the final count (in this case, 6) and have it displayed after each item. Do you think there is a solution for this?
ul {
list-style: none;
counter-reset: page;
padding: 0;
}
.page-number {
counter-increment: page;
}
.page-number:before {
content: 'Page ' counter(page) ' of'
}<p>I would like to utilize counters to print '6' after every item. For instance, page 1 of 6 </p>
<ul>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
</ul>The .page-number element has a fixed position, ensuring it is displayed on all printed pages.
Update:
@media print {
body { margin: 0; }
thead { counter-reset: pages; }
.page-number:before { counter-increment: pages; content: " "; }
.page-number:after { counter-increment: page; }
.page-number:after { content: "Page " counter(page) " of " counter(pages); }
}