CSS content Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.