:after
:before
quotes
counter-increment
counter-reset
PROPERTY: content
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()
Compatibility:
N6+
Version:
Level 2
Inherited:
No
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.
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.
:after
The
:after
psuedo-element dictates that the content is to be added after the element specified by the selector. The colon is mandatory.
Syntax:
selector:after { ... }
.
:before
The
:before
psuedo-element dictates that the content is to be added before the element specified by the selector. The colon is mandatory.
Syntax:
selector:before { ... }
.
The
content
property has eleven possible values.
attr(alt)
The
attr
value inserts the text of the
alt
argument as content.
counter(name)
The
counter
value inserts the named counter as content.
counter(name, list-style-type)
The
counter
value inserts the named counter as content rendered in the specified list-style-type.
counters(name, string)
The
counters
value inserts all named counters as content.
counters(name, string, list-style-type)
The
counters
value inserts all named counters as content rendered in the specified list-style-type.
close-quote
The
close-quote
value inserts the closing quotation values specified by 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.
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.
open-quote
The
open-quote
value inserts the opening quotation values specified by the nesting level of the
quotes
property.
string
The
string
value is a string or text enclosed within a pair of quotes.
url( )
The
url
value is a URL address enclosed within a pair of quotes.
This example adds opening and closing quotes.
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>
Simulated output, however, this code example works on Netscape 6+.
Output:
"DevGuru is the best reference source on the web."
Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information