CSS content Property

The content property is used with ::before and ::after pseudo-elements to generate content inside an element. It has the following values:

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

The content property must be used with ::before and ::after pseudo-elements, otherwise they won’t be generated and inserted. The content always should be added.

Objects which are inserted with 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

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

Here is an example with "string" value.

Example

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

Another example with "open-quote". Note that "open-quote" cannot appear without "close-quote".

Example

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

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 Is used to remove the opening quote from the content.
no-close-quote Is used to remove the closing quote from the content.
url It 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.




Related articles