:after (CSS selector)
| IE7 | FF1+ | Saf1.3+ | Op9.5+ |
|---|---|---|---|
| None | Partial | Full | Full |
| Version |
|---|
| CSS2 |
Example
This example will render the text
“cm” in the color #cccccc, after a
span element with a class value
of "centimeters":
span.centimeters:after {
content: "cm";
color: #cccccc;
}Description
This pseudo-element represents
generated content that’s
rendered after another element. This pseudo-element is used in conjunction
with the content
property, and additional properties can be specified to style it.
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.
