CSS generated content

The CSS generated content module defines how an element's content can be replaced and content can be added to a document with CSS.

Generated content can be used for content replacement, in which case the content of a DOM node is replaced with a CSS <image>. The CSS generated content also enables generating language-specific quotes, creating custom list item numbers and bullets, and visually adding content by generating content on select pseudo-elements as anonymous replaced elements.

Generated content in action

The HTML for this sample is a single, empty <div> inside an otherwise empty <body>. The snowman was created with CSS images and CSS backgrounds and borders. The carrot nose was added using generated content: an empty box with a wide orange left border added to the ::before pseudo-element. The text is also generated content: "only one <div>" was generated with the content property applied to the ::after pseudo-element.

To see the code for this animation, view the source on GitHub.

Reference

Properties

Note: The CSS generated content module introduces four at-risk properties that have not been implemented: string-set, bookmark-label, bookmark-level, and bookmark-state.

Functions

The CSS generated content module introduces six yet-to-be implemented CSS functions including content(), string(), and leader(), and the three <target> functions target-counter(), target-counters(), and target-text().

Data types

Guides

"How to" guide for generated content

Learn how to add text or image content to a document using the content property.

Create fancy boxes with generated content

Example of styling generated content for visual effects.

Specifications

Specification
CSS Generated Content Module Level 3

See also