MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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

Syntax

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

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 then mark each paragraph by adding a pseudo-element to the end of it.

<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.
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 Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:after support (Yes) (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
::after support (Yes) (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Support of animations and transitions 26 (Yes) 4.0 (2.0) No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after support (Yes) (Yes) ? ? ? ?
::after support (Yes) (Yes) ? ? ? ?
Support of animations and transitions (Yes) (Yes) 4.0 (4.0) No support No support No support

[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.

Quantum CSS notes

  • Gecko has a bug whereby the ::before and ::after pseudo-elements are still generated even if the content property value is set to normal or none. As per spec, they shouldn't be (bug 1387931). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).

See Also