Content
The content CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.
Overview
The content CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.
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 sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features