Generated Content Property
Last updated: 2026-09-13
content Generated Content Property
The content property inserts generated content before or after an element and is required by the ::before and ::after pseudo-elements. It can insert strings, images, counter values, or attribute values, and is often used to add decorative content, clear floats, or show link URLs without changing the HTML.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
content: normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote | Keyword | Generated content |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| content | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： content only takes effect on the ::before and ::after pseudo-elements; omitting it means the pseudo-element is not generated at all.
Important： Content inserted via content is not read by screen readers, so it must not hold information critical to understanding the page.
❓ FAQ
QWhat is the difference between the content property and writing directly in HTML?
AContent inserted via content lives in the presentation layer: it is not part of the DOM, cannot be selected or copied, and is not indexed by search engines — fine for decoration (icons, prefix/suffix symbols, counter numbers). Content that carries critical information must be in the HTML, and since screen readers may not announce generated content, it should not convey core semantics.
QHow do I insert an image with content?
AUse content: url(image.png); to place an image at the pseudo-element position, handy for small icons before links or headings. But url() gives no control over size or alignment. Prefer content: "" with background-image plus background-size, an icon font, or an inline SVG.
QWhy must ::before/::after always have content: ""?
AA pseudo-element is only generated when content is set, even an empty string ""; otherwise the whole pseudo-element is not rendered. Common uses of an empty content: drawing decorative elements with position, clearing floats (content: "" + display: table), or reserving space for a background icon. content is effectively the 'switch' that turns a pseudo-element on.
QWhat values does content support?
AStrings (e.g. "✓"), images via url(), counters via counter(name)/counters(), attribute values via attr(href), the quote keywords open-quote/close-quote, and normal and none. attr() can only read string attributes; it is commonly used in print styles to show the full URL after links.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
::before Pseudo-element
Insert generated content before an element
counter-increment Property
Use it with content for automatic numbering
