In CSS, ::after
creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content
property. It is inline by default.
/* Add an arrow after links */ a::after { content: "
→"; }
Note: The pseudo-elements generated by ::before
and ::after
are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>
, or to <br>
elements.
Syntax
/* CSS3 syntax */ ::after /* CSS2 syntax */ :after
Note: CSS3 introduced the ::after
notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :after
, introduced in CSS2.
Examples
Simple usage
Let's create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.
HTML
<p class="boring-text">Here is some plain old boring text.</p> <p>Here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">Contributing to MDN is easy and fun.</p>
CSS
.exciting-text::after { content: " <- EXCITING!"; color: green; } .boring-text::after { content: " <- BORING"; color: red; }
Result
Decorative example
We can style text or images in the content
property almost any way we want.
HTML
<span class="ribbon">Look at the orange box after this text. </span>
CSS
.ribbon { background-color: #5BC8F7; } .ribbon::after { content: "This is a fancy orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; }
Result
Tooltips
This example uses ::after
, in conjunction with the attr()
CSS expression and a data-descr
custom data attribute, to create tooltips. No JavaScript is required!
We can also support keyboard users with this technique, by adding a tabindex
of 0
to make each span
keyboard focusable, and using a CSS :focus
selector. This shows how flexible ::before
and ::after
can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.
HTML
<p>Here we have some <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>. </p>
CSS
span[data-descr] { position: relative; text-decoration: underline; color: #00F; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::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; }
Result
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 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::after | Chrome
Full support
1
| Edge
Full support
12
| Firefox
Full support
1.5
| IE
Full support
9
| Opera
Full support
7
| Safari
Full support
4
| WebView Android
Full support
≤37
| Chrome Android
Full support
18
| Firefox Android
Full support
4
| Opera Android
Full support
10.1
| Safari iOS
Full support
3.2
| Samsung Internet Android
Full support
1.0
|
Animation and transition support | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 4 | IE No support No | Opera Full support 15 | Safari No support No | WebView Android Full support ≤37 | Chrome Android Full support 26 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS No support No | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- Uses a non-standard name.
- Uses a non-standard name.