CSS: Using 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.


@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>