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

Example of content property

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
Edge Chrome Firefox Opera Safari
121141
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 1st January 2024