content

Description

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

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

Syntax and Property Values


content: normal | //from ww w  .j  a  v  a 2s .  c o m
         none | 
         string | 
         url() | 
         counter | 
         attr(X) | 
         open-quote |   
         close-quote | 
         no-open-quote | 
         no-close-quote | 
         inherit 

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

Example


<!DOCTYPE HTML>
<html>
<head>
    <style>
        p:before {<!--from  w  w  w.  ja v  a 2 s.c  om-->
          content: counter(paragraphNumber, upper-roman) ": ";
        }
        
        h1 {
          counter-reset: paragraphNumber;
        }
        
        p {
          counter-increment: paragraphNumber;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

Click to view the demo

The code above generates the following result.

content




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference