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) " - " ;}
Search WWH ::




Custom Search