HTML and CSS Reference
In-Depth Information
8.4.11.2. The content property
The
content
property accepts a wide variety of values, ranging from
simple strings to automatic counter references. You can include any
number of these values, separated by spaces, in a single
content
prop-
erty. The browser concatenates the values to form a single value that it
then inserts into the document.
The simplest of
content
values is a quote-enclosed string. You may
not include HTML or XHTML markup in the string. Rather, use escape
sequences to generate special text (e.g.,
\A
, which generates a line
break).
CSS2 escape sequences are like HTML/XHTML character entities. Where-
as character entities begin with the ampersand (
&
), followed by the
name or decimal value of a character (
#
suffix for the latter), you create
the same characters for CSS2 string-content property values by pre-
ceding the hexadecimal equivalent of the character with a backslash
(
\
). The escape sequence
\A
is the same as the character entity


,
which, if you consult
Appendix F
,
you'll find is the line-feed character.
The
content
property also accepts URL values. Expressed in styles, not
HTML-like fashion, the URL may point to any object acceptable to the
browser, including text, images, and sound files. For example, to place a
decorative symbol next to each equation in a document, you might use:
p.equation:before { content : url("http://www.kumquat.com/decorative-symbol.jpg") }
Keep in mind that the object shouldn't contain HTML/XHTML markup be-
cause the browser inserts its contents verbatim into the document.
The
content
property also supports automatic generation of contextually
correct, locale-specific quotation marks. You insert them using the
open-
quote
and
close-quote
keywords. These keywords insert the appropriate
quotation mark and increment or decrement, respectively, the browser's
nested quotation counter. You can control the appearance of the quota-
