CSS Property content

content property defines the generated content placed before or after an element.


Inherited No.
Version CSS2
JavaScript syntax object.style.content="content"
Applies to :before and :after pseudo-elements.

CSS Syntax

content: normal | 
         none | 
         string | 
         url() | 
         counter | 
         attr(X) | 
         open-quote |   
         close-quote | 
         no-open-quote | 
         no-close-quote | 

Property Values

The property values are listed in the following table.

Value Description
none Sets the content to nothing
normal Sets the content to normal, default is "none"
counter Sets the content as a counter
attr(attribute) Sets the content as one of the selector's attribute
string Sets text as content
open-quote Sets opening quote as content
close-quote Sets closing quote as content
no-open-quote Removes the opening quote
no-close-quote Removes the closing quote
url(url) Use media (an image, a sound, a video, etc.) as content
inherit Inherit the content property from the parent element

Browser compatibility

content Yes 8.0 Yes Yes Yes


An example showing how to use content CSS property.

        p:before {<!--  ww  w . j ava  2 s.com-->
          content: counter(paragraphNumber, upper-roman) ": ";
        h1 {
          counter-reset: paragraphNumber;
        p {
          counter-increment: paragraphNumber;
    <h1>Heading One</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Two</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Three</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>

Click to view the demo