CSS2 » Properties » content

Version: Level 2

Compability: N6+

Syntax:
content : attr(alt) | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url()
url( )
The url value is a URL address enclosed within a pair of quotes.
 
This example adds opening and closing quotes.
 
string
The string value is a string or text enclosed within a pair of quotes.
open-quote
The open-quote value inserts the opening quotation values specified by the nesting level of the quotes property.
no-open-quote
The no-open-quote value does not insert an opening quotation mark, but it does increment the nesting level of the quotes property.
no-close-quote
The no-close-quote value does not insert a closing quotation mark, but it does increment the nesting level of the quotes property.
close-quote
The close-quote value inserts the closing quotation values specified by the nesting level of the quotes property.
counters
counters(name, string, list-style-type):The counters value inserts all named counters as content rendered in the specified list-style-type.
counters
counters(name, string):The counters value inserts all named counters as content.
counter
counter(name, list-style-type):The counter value inserts the named counter as content rendered in the specified list-style-type.
counter(name)
The counter value inserts the named counter as content.
attr(alt)
The attr value inserts the text of the alt argument as content.

The content property is used with the :before and :after psuedo-elements to display content either before or after a specified CSS selector. This content can include strings, quotations marks, URLs, and counters. Simply put, this allows you to repetitiously add text and pictures before and after HTML elements. This property is not inherited.

Note that the content property does not inherit. However, the :before and :after psuedo-elements can inherit any inheritable styles that are in effect, or you can specify various CSS properties to effect the appearance of the content.

Examples

Code:
<html>
<head>
<title>content test</title>
<style type="text/css">
p:before {content: open-quote;}
p:after {content: close-quote;}
</style>
</head>
<body>
<p>DevGuru is the best reference source on the web.</p>
</body>
</html>
Output:
"DevGuru is the best reference source on the web."
Explanation:

Simulated output, however, this code example works on Netscape 6+.

Language(s): CSS2
:after

Syntax: selector:after { ... }

The :after psuedo-element dictates that the content is to be added after the element specified by the selector. The colon is mandatory.

:before

Syntax: selector:before { ... }

The :before psuedo-element dictates that the content is to be added before the element specified by the selector. The colon is mandatory.

See Also: