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.
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
To see the code for this animation, view the source on GitHub.
The CSS generated content module introduces six yet-to-be implemented CSS functions including
leader(), and the three
|CSS Generated Content Module Level 3 |