HTML and CSS Reference
In-Depth Information
tion marks using the
quotes
property, described shortly. You may also
use the
no-open-quote
and
no-close-quote
keywords, which increment or
decrement the nesting depth without inserting a quotation mark.
A clever feature of the
content
property is its ability to have the browser
render the value of any attribute of its associated element. The
attr
value has a single parameter, corresponding to the name of an attrib-
ute. If that attribute is defined for the element, its value is inserted into
the document. To display the URL of an image after the image, for in-
stance, you might write:
img:after { content : "("attr(src) ") " }
If the attribute is not defined for the element, no content gets inserted,
although the other values for the
content
property (like the parentheses
we included in the earlier example) would still be inserted.
One of the most powerful features of the
content
property is its ability to
create numbered lists. We cover this in detail in the upcoming
section,
8.4.11.4
.
All the popular browsers support the
:before
and
:after
pseudoele-
ments, but Internet Explorer does not support the
content
property.
8.4.11.3. Specifying quotation marks
While you insert quotation marks using the
open-quote
and
close-quote
values with the
content
property, you control the actual characters used
for quotation marks with the
quotes
property.
The value of this property is one or more pairs of strings. The first pair
defines the open and close quotation marks for the outermost level of
quotations in your document. The next pair specifies the next level, and
so forth. If the quotation level exceeds the supplied pairs of characters,
the browser starts over with the outermost pair. Note that while most
