Here's a very basic snippet of CSS that adds the current page number to the bottom of every page:

@page {
    @bottom {
        content: counter(page)
    }
}

If you're not used to paged media CSS, you might want to read more about headers, footers, and page margins.

In the example above, we're using a special counter attribute that accesses the predefined counter called page. (You can make your own counters, but that's outside the scope of this article.)

Changing The Counter Style

The page counter is styled with decimals by default, but it can be changed to any of the following:

  • decimal (1, 2, 3, ...)
  • decimal-leading-zero (01, 02, 03, ... 09, 10, 11, ...)
  • lower-alphalower-latin (a, b, c, ... z, aa, ab, ...)
  • upper-alphaupper-latin (A, B, C, ... Z, AA, AB, ...)
  • lower-roman (i, ii, iii, iv, v, vi, ...)
  • upper-roman (I, II, III, IV, V, VI, ...)
  • asterisks (*, **, ***, ...)

To change the style, simply pass any of the above as a second argument to counter:

@page {
  @bottom {
    content: counter(page, lower-roman);
  }
}

Resetting The Counter

There are times you may want to reset the page  counter. For example, you may want to use roman numerals for front matter and decimals for content. Here's how to reset the counter:

.introduction {
  counter-reset: page
}

In this example, I'm applying the counter-reset  property to an element with the class introduction  (perhaps corresponding to a section of the document.)

Advanced Formatting: Text and Total Pages

Here's an advanced example that includes both custom text and a reference to the total number of pages:

@page {
  @bottom {
    content: "Page " counter(page) " of " counter(pages);
  }
}
Did this answer your question?