CSS - content

Description

The content property defines content to be inserted in generated content operations. This property is used along with :before or :after pseudo elements.

Possible Values

string − Any permitted string value. This is always enclosed in quotation marks.
URI − A pointer to an external resource such as an image.
counter − There are two possible forms of this value: counter(name, style?) and counters(name, string,? style?). In both cases, the content will be the value of the named counter at that point in the document, rendered in the optional style value (decimal by default). In the case of counters(...), the optional string value indicates a string to follow each instance of the named counter.
attr(X) − Causes the insertion of the value of attribute X for the selector's subject. For example, it is possible to display the value of the alt attribute of an image using this value.
open-quote − Causes the insertion of the appropriate string specified using the property quotes.
close-quote − Causes the insertion of the appropriate string specified using the property quotes.
no-open-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still increased.
no-close-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still decreased.

Applies to

:before and :after pseudo-elements.

DOM Syntax

object.style.content = "url(home.avi)"

Example

Following is the example which demonstrates how to use :before element to add some content before any element.

Live Demo

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

This will produce following black link −

Following is the example which demonstrates how to use :after element to add some content after any element.