CSS: How to use page counter in styled footnotes

June 23, 2016

In order to place some fixed multi-line text together with the current page counter in the footer you'll need to use a separate div to reference the page number counter from inside the running footer element.

Ex:

@bottom-left {
/*content: element(footer)  " " counter(page);*/
content: element(footer);
}

...

div.pageNum {
content: counter(page);
}

...

<div id="footer">
<div>Footer line 1</div>
<div>Footer line 2</div>
<div class="pageNum"></div>
</div>