How to print page number while printing html in new Chrome?

Question

I need print page number when printing html in Chrome Version 52.0.2743.116 m (64-bit). However I haven't found the answer yet.

I have already tried this:

@page {
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}

This didn't work at all.

Then I have found this Q&A:

---

For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example. The CSS is:

#content {
    display: table;
 }
#pageFooter {
    display: table-footer-group;
 }

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
 }

And the HTML code is:

 <div id="content">
     <div id="pageFooter">Page </div>
     multi-page content here...
 </div>

---

Unfortunately, this works only in FireFox 20+ versions and Chrome Version 35.0.1916.153

Downgrade isn't an answer. Can you help me, please?

Answer 1

This set up works for me, you just need an element at the end of each page to append a page counter onto.

Code:

HTML:

body {
  counter-reset: section;
}

@media print {
  .page {
    page-break-after: always;
  }
  .page .pageEnd::after {
    counter-increment: section;
    /* Increment the section counter*/
    content: "Page " counter(section) " ";
    /* Display the counter */
  }
}

<div class="page">
  <h2>Here is page 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 4</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 5</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 6</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 7</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>