| Version |
|---|
| CSS2 |
| IE7 | FF1+ | SA1.3+ | OP9.5+ |
|---|---|---|---|
| None | Partial | Full | Full |
Syntax
Description
This pseudo-element represents
generated content rendered
before another element, and is used in conjunction with the content property. Additional
properties can be specified to style the pseudo-element. Note that the
generated content is only rendered—it doesn’t become part of the document
tree.
Example
In this example, the text “You are
here:” is rendered before the document element with the
id value of "breadcrumbs", and
given a right margin value of 0.5em:
#breadcrumbs:before {
content: "You are here:";
margin-right: 0.5em;
}Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| None | None | None | Partial | Partial | Partial | Full | Full | Full | Buggy | Full |
In Firefox versions up to and including 2, this pseudo-element is not fully stylable, most notably when it comes to applying positioning properties. Firefox appears to have implemented the original CSS2 specification.
In Firefox 1.5 and 2, this
pseudo-element doesn’t work for fieldset elements.
In Opera 9.2, whitespace is always
displayed within this pseudo-element as if it’s preformatted text—like
whitespace in an HTML <pre> tag.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.