CSS content Property
Description
The content
CSS property is used to insert generated content into an element, typically for pseudo-elements (::before and ::after) or when working with the ::marker pseudo-element in list items. It allows developers to add text or other visual elements to a webpage without altering the HTML structure. The content property accepts various values, including text strings enclosed in double or single quotes, counters for numbering, and special keywords like 'none' to remove content. It is a powerful tool for enhancing the presentation of web content while maintaining clean HTML markup.
- Initial value
- normal
- Applies to
- ::before and ::after pseudo-elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.content
Interactive Demo
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
The following table will show you the current browser support for the CSS content
property.
Desktop | |||||
12 | 1 | 1 | 4 | 1 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 1st January 2024