Content
The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated "alt" text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.
Objects inserted using the content property are anonymous replaced elements.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
close-quote | 1 | 12 | 1 | 1 | 18 | 1 |
element replacement Element replacement | 28 | 79 | 63 | 9 | 28 | 9 |
| The CSS data type is a special type of image that consists of a progressive transition between two or more colors. | 26 | 12 | 113 | 7 | 26 | 7 |
no-close-quote | 1 | 12 | 1 | 1 | 18 | 1 |
no-open-quote | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
none applies to elements Experimental `content: none` for elements | | | 91 | | | |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
open-quote | 1 | 12 | 1 | 1 | 18 | 1 |
| The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional… | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS type | ||||||
unicode escaped characters Unicode escaped characters (`\xx`) | 1 | 12 | 1 | 1 | 18 | 1 |
- This browser only partially implements this feature
- `content: <gradient>` doesn't paint on ::before/::after pseudo elements. See bug 1832901.
- Requires an experimental browser flag to be enabled
Syntax
.external-link::after {
content: ' ↗';
}
.chapter::before {
content: counter(chapter) '. ';
}Live demo
Use cases
-
Using Content
The content CSS property replaces content with a generated value.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.