Mozilla Developer NetworkSummary
The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.
Syntax
element:after { style properties } /* CSS2 syntax */
element::after { style properties } /* CSS3 syntax */
The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.
Examples
.boringtext::after {
content: " Thank you for reading all this!";
font-size: small;
color: red;
background: gray;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions | Working Draft | Allows transitions on properties defined on pseudo-elements. |
| CSS Animations | Working Draft | Allows animations on properties defined on pseudo-elements. |
| Selectors Level 3 | Recommendation | Introduces the two-colon syntax. |
| CSS Level 2 (Revision 1) | Recommendation | Initial definition, using the one-colon syntax |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
:after support |
(Yes) | 1.0 (1.7 or earlier) [1] | 8.0 | 4 | 4.0 |
::after support |
(Yes) | 1.5 [1] | 9.0 | 7 | 4.0 |
| Support of animations and transitions | 26 | 4.0 (2.0) | Not supported | Not supported | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
:after support |
? | ? | ? | ? | ? |
::after support |
? | ? | ? | ? | ? |
| Support of animations and transitions | 26 | 4.0 (4.0) | Not supported | Not supported | Not supported |
[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions.
See Also
