Summary
The CSS ::after
pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content
CSS property. This element is inline by default.
Syntax
/* CSS2 syntax */ element:after { style properties } /* CSS3 syntax */ element::after { style properties }
The ::after
notation (with two colons) 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
Simple usage
Let's create two classes: one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a pseudo-element to the end of it.
<p class="boring-text">Here is some good old boring text.</p> <p>Here is some moderate text that is neither boring nor exciting.</p> <p class="exciting-text">Contributing to MDN is easy and fun. Just hit the edit button to add new live samples, or improve existing samples.</p>
.exciting-text::after { content: "<- now this *is* exciting!"; color: green; } .boring-text::after { content: "<- BORING!"; color: red; }
Output
Decorative example
We can style text or images in the content
property almost any way we want.
<span class="ribbon">Notice where the orange box is.</span>
.ribbon { background-color: #5BC8F7; } .ribbon::after { content: "Look at this orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; }
Output
Tooltips
The following example shows the use of the ::after
pseudo-element in conjunction with the attr()
CSS expression and a data-descr
custom data attribute to create a pure-CSS, glossary-like tooltip. Checkout the live preview below, or you can see this example on a separate page.
<p>Here is the live example of the above code.<br /> We have some <span data-descr="collection of words and punctuation">text</span> here with a few <span data-descr="small popups which also hide again">tooltips</span>.<br /> Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>. </p>
span[data-descr] { position: relative; text-decoration: underline; color: #00F; cursor: help; } span[data-descr]:hover::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; }
Output
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::after' in that specification. |
Working Draft | No significant changes to the previous specification. |
CSS Transitions The definition of 'transitions on pseudo-element properties' in that specification. |
Working Draft | Allows transitions on properties defined on pseudo-elements. |
CSS Animations The definition of 'animations on pseudo-element properties' in that specification. |
Working Draft | Allows animations on properties defined on pseudo-elements. |
Selectors Level 3 The definition of '::after' in that specification. |
Recommendation | Introduces the two-colon syntax. |
CSS Level 2 (Revision 1) The definition of '::after' in that specification. |
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.8)[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 |
(Yes) | ? | ? | ? | ? |
::after support |
(Yes) | ? | ? | ? | ? |
Support of animations and transitions | (Yes) | 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.