Generated Content

Generated content is text and other content that is not found in the original input document, but is added to the output from a style sheet using the CSS content property.

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 details.

@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 custom marker for list items. See Lists for more details.

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

Footnote markers

The content property can be applied to the ::footnote-call and ::footnote-marker pseudo-elements to specify custom markers for footnotes. See Footnotes for more details.

.fn::footnote-call { content: "*" } 

Before and After pseudo-elements

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

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