Skip to: content, navigation

:after (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE7 FF1+ SA1.3+ OP9.5+
None Partial Full Full

Syntax

:after {
declaration block
}

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.

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;
}

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.

Related Products

Search