:before (CSS selector)
| IE7 | FF1+ | Saf1.3+ | Op9.5+ |
|---|---|---|---|
| None | Partial | Full | Full |
| Version |
|---|
| CSS2 |
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;
}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.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | Partial |
| 1.5 | Partial | |
| 2.0 | Partial | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Buggy |
| 9.5 | 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.
Related Reading
User-contributed notes
There are no comments yet.
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.
