Modern CSS Authoring
Generated Content
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 selector | Purpose | Example |
|---|---|---|
| content | Supplies generated content for a pseudo-element. | content: "Note: " |
| counter-reset | Creates or resets a named counter. | counter-reset: section |
| counter-increment | Advances a named counter. | counter-increment: section |
| ::marker | Styles 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 |
|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 11.1 |
| @counter-style | 91 | 91 | 33 | 17 |
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
::markerfor list markers. It preserves list semantics and avoids the positioning work required by a custom::beforemarker. - 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.