---
title: "CSS: How to use page counter in styled footnotes"
description: "CSS: Using page counter in styled footnotes"
---

[Antenna House News ](https://www.antennahouse.com/news)

# [CSS: How to use page counter in styled footnotes](https://www.antennahouse.com/news/2016/06/adding-fixed-text-to-footer-w-page-counter)

 Written by [Antenna House](https://www.antennahouse.com/news/author/antenna-house) | 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>

 

[View full post](https://www.antennahouse.com/news/2016/06/adding-fixed-text-to-footer-w-page-counter)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Antenna House"
  },
  "dateModified" : "2021-08-10T16:50:51.521Z",
  "datePublished" : "2016-06-23T15:36:15Z",
  "headline" : "CSS: How to use page counter in styled footnotes",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.antennahouse.com/news/2016/06/adding-fixed-text-to-footer-w-page-counter",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Antenna House News"
  }
}
```