Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

Modern CSS Authoring

Generated Content

Written by Published

Add presentational markers and automatic numbering with pseudo-elements, content, and counters. You will create decorative pseudo-element content, automatic numbering, custom marker systems, and safer list markers with ::marker.

Generated content is text or imagery inserted by CSS for presentation. Counters maintain numeric state so markers, headings, and references can be numbered without hard-coded labels.

Counters are particularly useful for procedural steps, figures, and nested outlines whose numbering would otherwise be maintained by hand. The generated result, however, is not a dependable replacement for meaningful HTML. Copying, translation, accessibility exposure, and user styles may treat CSS content differently. This topic also connects with CSS Pseudo Elements and CSS Lists.

Pseudo-elements can generate presentation

Example

css

.external-link::after {
  content: " ↗";
}

.steps {
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
}

.steps > li::marker {
  content: "Step " counter(step) ": ";
}

Generated content is best for decoration and redundant labels. Essential instructions, names, and controls belong in HTML because CSS content may not be exposed consistently to assistive technology or copying tools.

Custom counter styles

Example

css

@counter-style circled {
  system: fixed;
  symbols: ① ② ③ ④ ⑤;
  suffix: " ";
}

ol { list-style: circled; }

Generated Content Properties

Property or selectorPurposeExample
contentSupplies generated content for a pseudo-element.content: "Note: "
counter-resetCreates or resets a named counter.counter-reset: section
counter-incrementAdvances a named counter.counter-increment: section
::markerStyles a list item's marker box.li::marker { color: red; }

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Generated Content example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.external-link::after {
  content: " ↗";
}

.steps {
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
}

.steps > li::marker {
  content: "Step " counter(step) ": ";
}

@counter-style circled {
  system: fixed;
  symbols: ① ② ③ ④ ⑤;
  suffix: " ";
}

ol { list-style: circled; }
  </style>
</head>
<body>
  <main><ol class="steps"><li>Prepare the markup</li><li>Add the counter</li><li>Style the marker</li></ol><a class="external-link" href="https://example.com">External reference</a></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
::marker86866811.1
@counter-style91913317

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • Prefer ::marker for list markers. It preserves list semantics and avoids the positioning work required by a custom ::before marker.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Keep essential content in HTML; reserve generated content for markers, numbering, and presentation.

Keep the semantic list or heading structure in the document and use counters to enhance its presentation. Prefer ::marker for list labels because it preserves native list behavior and requires less positioning than a simulated marker built with ::before.

PreviousLogical PropertiesNextAccessible CSS