CSS content Property

The content property inserts content before or after an element.

It uses the ::before and ::after pseudo-elements with this.

Content can be a string, a symbol, or an image.

Example

#

A "\2605" (star) character added before each list item as content.

  • HTML
  • CSS
  • JavaScript
<style>
  .list {
    list-style-type: none;
    padding-left: 10px;
  }

  .list li::before {
    content: "\2605";
    margin-right: 10px;
    color: teal;
  }
</style>

<ul class="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Syntax

content: normal | none | counter | attr | string | 
         open-quote | close-quote | no-open-quote | 
         no-close-quote | url | initial | inherit;

Values

#

Value Description
normal Default. Sets content to "none" - which means no content
none Sets content to nothing
counter Sets the content as a counter
attr(attribute) Sets the content as one of the selector's attribute
string Sets the content to any specified text
open-quote Sets the content to be an opening quote
close-quote Sets the content to be a closing quote
no-open-quote Removes the opening quote from the content if specified
no-close-quote Removes the closing quote from the content if specified
url(url) Sets the content to be some kind of media like an image, a sound, a video, and more.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

List items with a checkmark after the text.

  • HTML
  • CSS
  • JavaScript
<style>
  .list-after {
    list-style-type: none;
    padding-left: 10px;
  }

  .list-after li::after {
    content: "\2713";
    margin-left: 10px;
    color: green;
  }
</style>

<ul class="list-after">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Did you know?

Did you know?

Using an image as a content value

The value of a content property can also be an image.
Below, each list item has a circle icon before the text.

  • HTML
  • CSS
  • JavaScript
<style>
  .list-image {
    list-style-type: none;
    padding-left: 10px;
  }

  .list-image li::before {
    content: url(/img/css/circle.png);
    margin-right: 10px;
  }
</style>

<ul class="list-image">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Browser support

This table shows when content support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides