content
The content of the `::before` and `::after` pseudo-elements.
Syntax
content: "text";Values
| Parameter | Type | Description |
|---|---|---|
| "text" | string | A string in quotes. |
| "" | string | Empty content — the pseudo-element exists, for example as a decorative shape. |
| attr() | function | The value of an attribute of the element: `attr(title)`. |
| counter() | function | The value of a CSS counter. |
Examples
Text and an attribute value:
<style>
.price::before { content: "$"; }
abbr[title]::after { content: " (" attr(title) ")"; color: gray; }
</style>
<p class="price">25</p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>Numbering with a counter:
<style>
ol { list-style: none; counter-reset: step; padding: 0; }
li { counter-increment: step; }
li::before { content: "Step " counter(step) ": "; font-weight: bold; }
</style>
<ol><li>Open the box</li><li>Plug it in</li><li>Turn it on</li></ol>Notes
Generated text cannot be selected or copied, and screen readers may skip it. Use it for decoration and hints, not for important content.
See also
- ::before — Creates a virtual first child of the element — for decorative text or shapes.
- ::after — Creates a virtual last child of the element — for icons, marks and decorations after the content.
- ::marker — The bullet or number of a list item.
- counter() — Prints the value of a CSS counter in `content`; `counters()` prints all nested levels at once, like 2.1.3.
Related recipes
In the tutorial
- Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.