Generated Content

Generated content is content that is not in the original document, but is added to the output using the content property.

The content property can be applied to elements, pseudo-elements and page margin boxes.

Page headers and footers

The content property can be applied to page margin boxes, such as @top and @bottom to create page headers and footers with generated content. See Page Headers and Footers for more information.

@page {
    @top { content: "Prince User Guide" }
    @bottom { content: counter(page) }
} 

List markers

The content property can be applied to the ::marker pseudo-element to specify a customised list item marker. See Lists for more information.

li::marker { content: "No. " counter(list-item) } 

The ::before and ::after pseudo-elements

The content property can be applied to the ::before and ::after pseudo-elements to add generated content in the output. For example, including auto-generated counters in front of headings or including quotation marks around a block of text.

h1::before, h1::after { content: "***" }