CSS content Property

The content property is used with the ::before and ::after pseudo-elements to generate content inside an element, otherwise the content won’t be generated and inserted. The content always should be added. The property has the following values:

  • normal
  • none
  • counter
  • attr
  • string
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • url

Objects which are inserted with the content property are anonymous replaced elements.

Initial Value normal
Applies to ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.Content = "none";

Syntax

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

Example of the content property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
      content: "Name -";
      }
      .country::before { 
      content: normal;
      }
    </style>
  </head>
  
  <body>
    <h2>Content property example</h2>
    <p>My name is John</p>
    <p class="country">I live in Canada</p>
  </body>
</html>

Result

Example of the content property with the "string" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:before{
      content:"List item";
      }
      p:after{
      content:" with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Here is some paragraph</p>
  </body>
</html>

In the following example, you can see that "open-quote" cannot appear without "close-quote".

Example of the content property with the "open-quote" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
      content: open-quote;
      }
      p::after {
      content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>Hello, my name is John</p>
    <p>I am from Canada</p>
  </body>
</html>

Example of the content property with the "open-quote" and "no-close-quote" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p::before { 
      content: open-quote; 
      } 
      p::after { 
      content: no-close-quote; 
      } 
    </style>
  </head>
  <body>
    <p>Example with content property</p>
  </body>
</html>

Values

Value Description
normal Sets the content to normal. This is the default value.
none Sets the content to nothing. The pseudo-element is not generated.
counter Sets the content as a counter.
attr Sets the content as one of the selectors' attribute.
string Sets the content to 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.
no-close-quote Removes the closing quote from the content.
url Sets the content to be a media just like an image, a sound or a video. If the image cannot be displayed, it will be either ignored or some placeholder will be displayed.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Do you find this helpful?

Related articles