Skip to main content

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​

{{EmbedGHLiveSample("css-examples/modules/generated_content.html", '100%',420)}}

The HTML for this sample is a single, empty {{HTMLElement("div")}} inside an otherwise empty {{HTMLElement("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 {{cssxref("::before")}} pseudo-element. The text is also generated content: "only one <div>" was generated with the {{cssxref("content")}} property applied to the {{cssxref("::after")}} pseudo-element.

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

Reference​

Properties​

  • {{cssxref("content")}}
  • {{cssxref("quotes")}}

[!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​

  • CSS pseudo-elements module

    • {{cssxref("::before")}} pseudo-element
    • {{cssxref("::after")}} pseudo-element
    • {{cssxref("::marker")}} pseudo-element

  • CSS lists and counters module

    • {{cssxref("counter", "counter()")}} function
    • {{cssxref("counters", "counters()")}} function
    • {{cssxref("counter-increment")}} property
    • {{cssxref("counter-reset")}} property

  • CSS values and units module

    • {{cssxref("attr", "attr()")}} function
    • {{cssxref("string")}} data type
    • {{cssxref("image")}} data type

Specifications​

See also​