HTML and CSS Reference
In-Depth Information
Compatibility
CSS 1, 2, 3
IE 3+
Netscape 4+, Firefox 1+
Opera 4+, Safari 1+
Notes
• This property is often used in conjunction with the
background-color
property. If
both properties are not set, it is possible to have rendering problems when default
color values hide content. The W3C CSS validator will warn of this dangerous
though unlikely issue.
• A concern with this property is not whether it is supported, but what CSS color
values are supported. Developers should assume that
hsl()
and other emerging
CSS3 values are more dangerous to use than standard keywords or hex values.
content
This property generates content in a document and is used with the
:before
and
:after
pseudo-elements.
Syntax
content: normal | none |
string
| url() |
counter
| attr(
X
) | open-quote |
close-quote | no-open-quote | no-close-quote | inherit
The most commonly used
string
value simply inserts the defined quote-delimited string
either before or after the selected element depending on the rule in use:
div.section:before {content: "Section Name: ";}
The
url
value is used to insert an external resource, typically an image:
div.section:before {content: url(warning.png);}
It is possible to combine values,
div.section:before {content: "Danger danger! " url(warning.png) " Generated
Content Ahead ";}
and the generated content can be styled by further applied properties:
div.section:before {content: "Danger danger! ";
font-size: xx-large; background-color: black;
color: yellow;}
Counter values can be specified and used to automatically add a sequential indicator. It
is generally defined in the form of
counter(
name
)
, where
name
is the name of the counter,
or
counter(
name
,
style
)
, where
style
indicates the
list-style-type
to use:
ol.countTest li:before {content: counter(counter1) " - " ;}