CSS content Property
Description
The content
property dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found.
- Initial value
- normal
- Applies to
- ::before and ::after pseudo-elements
- Inherited
- No
- Media
- All
- Computed value
- Specified value
- Animatable
- No
- CSS Version
- CSS2, CSS3
- JavaScript syntax
- object.style.content
Syntax
content: [ <uri> ',' ]* [ normal | none | inhibit | <content-list> ]
Values
- <string>
- <uri>
- <counter>
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- attr
- inherit
Example
<ul>
<li>Adelaide</li>
<li>Melbourne</li>
<li>Sydney</li>
</ul>
ul {
list-style: none;
}
li::before {
content: "•";
padding-right: 10px;
color: red;
}
Browser Support
Desktop | |||||
8 | 12 | 1 | 1 | 4 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | Yes |
Last updated by CSSPortal on: 26th October 2019