Page Numbers

To show the current page number, you can use the page counter in the content CSS value of the element you want to display the page number on.

For example, using Margin Boxes, we can add page numbers to the bottom of each page.


@page {
  @bottom-center {
    content: counter(page);
  }
}

Show total count of pages

To show the total number of pages, you can use the pages counter. This can be combined with the page counter, to show a string like Page X of N on each page.


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