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
Explorer Edge Chrome Firefox Opera Safari
8121141
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.11Yes

Last updated by CSSPortal on: 26th October 2019