content

This property generates content in a document and is used with the :before and :after pseudo-elements. Values for the property include string, url, counter, open-quote, close-quote, no-open-quote, no-close-quote, and attr(X). The string value simply inserts the defined string either before or after the selected element, depending on the rule in use. The url value is used to insert an external resource, typically an image. Counter values can be specified and used to automatically add a sequential indicator. The values open-quote and close-quote insert quotation symbols specified by the quotes property or, if undefined, default to the user-agent's default quote style. The no-open-quote and no-close-quote values do not insert quotation symbols but do increment or decrement the nesting level for quotes. The attr(X) returns a string value for the attribute X for the element the rule is associated with. If the related element does not have an attribute named X, an empty string is used.

Examples

div.section:before {content: "Section: ";}
div:before {content: url(sectionstart.gif);}
div:after {content: url(sectionend.gif);}
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
p:before {content: counter(par-num, upper-roman); ". " }
p:before {content: attr(title); }

Browser and CSS Support Notes

CSS2
IE not yet supported
Nav 6, 7 (no counter support)
Opera 7