CSS content Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

content: '>> ';

content: '😛 ';

content: url('images/cross.png');
margin-right: 6px;

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

HTML

<ul> 

   <li>Adelaide</li> 

   <li>Melbourne</li> 

   <li>Sydney</li> 

</ul>

CSS

ul {
   list-style: none; 
}
li::before { 
   content: "•"; 
   padding-right: 10px; 
   color: red; 
 }

Result

Editor

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

Support Us