CSS Content Property

The content property is used with the ::before and ::after pseudo-elements to generate content inside an element. Without an explicit value, the pseudo-elements remain empty. The property has the following values:

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

Info

Objects which are inserted with the content property are anonymous replaced elements. Note: The quotes property must be set on the element for open-quote and close-quote to render actual quotation marks.

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

Syntax

Syntax of CSS content Property

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

Example of the content property:

Example of CSS content Property with normal value

<!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:

Example of CSS content Property with 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:

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        quotes: open-quote close-quote;
      }
      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:

Example of the content property with "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 to a counter value.
attr	Sets the content to the value of an attribute on the selected element.
string	Sets the content to a string of 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 a URL pointing to a resource, such as an image, sound, or 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.

Practice

What are the different CSS content categories that can be used to control a box's content size?