CSS 2.1 Reference: content Property

The content property, used with the :before and :after pseudo elements, allows additional content to be generated. For example, this property could be used to generate paragraph numbers at the beginning of all <p> tags.

This property is specified by using one or more of the following values according to the syntax shown above:

• string - The specified string will be inserted.
• URI - The resource that is pointed to by the URI will be inserted. For example, this could be used to insert an image.
• counter - An auto generated counter number will be inserted.
• attr(attribute-identifier) - The specified attribute for the current element will be inserted.
• keyword

CSS Example: The content properties are set using string values.

  p:before {content: "Start  - ";
            color: red;
  }
  p:after {content: " - End";
           color: red;
  }

CSS Example: The content property is set using a URI that is pointing to an image.

  p:before {content: url("../images/dots.gif");}

CSS Example: The content property is set using a counter value followed by a string value.

  p:before {content: counter(tst1, upper-roman) ". ";}
  p {counter-increment: tst1;}

CSS Example: The content property is set using an attr(attribute-identifier) value.

  a:after {content: attr(href);
           color: red}

• open-quote - The open-quote string, specified by the quotes property, is inserted.
• close-quote - The close-quote string, specified by the quotes property, is inserted.
• no-open-quote - No quote mark is inserted but the quote nesting level is incremented.
• no-close-quote - No quote mark is inserted but the quote nesting level is incremented.
• normal - Nothing is inserted.
• none - Nothing is inserted.
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.