Inserting Text Content

Content can be inserted into a page region pseudo-element via the content property. You may be familiar with this technique from inserting content into ::before and ::after pseudo-elements:

@page {
  @top-left-corner {
    content: "My eBook Title";
  }
}

This technique is often used with a page counter. For example:

@page {
  @bottom {
    content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
  }
}