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