title: css: rendering page numbers in HTML footer for printed PDF page (Chromium)
body: <p>My workflow for dynamically generating PDF:</p>
  
  <ol>
  <li>Handlebars compiles HTML</li>
  <li>I add a "fake footer" to this HTML using the CSS trick with <code>position: fixed</code> on a normal <code>&lt;div&gt;</code> element that actually appears in HTML only once</li>
  <li>Puppeteer (so, headless Chromium browser) is used to generate a PDF out of this HTML page (I know the git version of Puppeteer has automatic footer insertion; for complicated reasons I am stuck with the npm version which does not support this yet).</li>
  </ol>
  
  <p>My problem is how to add page numbers in this footer. I have tried the <code>counter-reset</code> + <code>counter-increment</code> solution, but this does not increment the page counter since, from its point of view, there is only one HTML element on which it is applied.</p>
  
  <p>So I get a footer that says "Page 1" on each page of the generated PDF.</p>
  
  <p>The HTML element:</p>
  
  <pre><code>...
  &lt;div class="page-footer"&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>The CSS styling:</p>
  
  <pre><code>.report {
    counter-reset: pageIndex 0;
  
    .page-footer:before {
      content: "Page: " counter(pageIndex);
      counter-increment: pageIndex +1;
    }
  
    .page-footer {
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       border-bottom: solid 1px;
    }
    ...
  }
  </code></pre>
  
  <p>Does something like this actually work on Chromium, or am I just wasting my time?</p>