:after (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE8+ FF3.5+ SA1.3+ OP9.5+ CH2+
Buggy Full Full 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 although the generated content will of course inherit properties from it’s parent.

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;
}
Note: The double colon syntax ::for pseudo-elements is CSS3-only. CSS2.x uses a single colon for both pseudo-elements and pseudo-classes. Therefore support for the single colon version is shown as full in the compatibility table above even if the browser doesn’t support the double colon syntax.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Buggy Partial Partial Partial Partial Full Full Full Full Full Buggy Full Full 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. There are also various bugs with overflow and float. 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.

In Internet Explorer version 8 the text-align values are not correctly inherited, which would be evident if the generated content’s display was set to block. It would be necessary to also set the text-align values on the generated content to match those of the parent. This bug applies to both the :before and :after pseudo elements.

Internet Explorer version 8 doesn’t support the double colon syntax.

Previous / Next page

  1. Previous
  2. Next

Related reference material

  • content
    inserts content before or after an element

User-contributed notes

ID:
#1
Contributed:
by brothercake
Date:
Thu, 06 Aug 2009 18:41:24 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

same comments as :before (lol - same as before :D)

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