Web/CSS/ after

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

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

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

Specifications

Specification	Status	Comment
CSS Pseudo-Elements Level 4The definition of '::after' in that specification.	Working Draft	No significant changes to the previous specification.
CSS AnimationsThe definition of 'animations on pseudo-element properties' in that specification.	Working Draft	Allows animations on properties defined on pseudo-elements.
Selectors Level 3The 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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
::after	Chrome Full support 1 Full support 1 Full support 1 Alternate Name' Alternate Name' Uses the non-standard name: :after	Edge Full support 12 Full support 12 Full support 12 Alternate Name' Alternate Name' Uses the non-standard name: :after	Firefox Full support 1.5 Notes' Full support 1.5 Notes' Notes' Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none. Notes' Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties. Full support 1 Alternate Name' Alternate Name' Uses the non-standard name: :after	IE Full support 9 Full support 9 Full support 8 Alternate Name' Alternate Name' Uses the non-standard name: :after	Opera Full support 7 Full support 7 Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :after	Safari Full support 4 Full support 4 Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :after	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Alternate Name' Alternate Name' Uses the non-standard name: :after	Chrome Android Full support 18 Full support 18 Full support 18 Alternate Name' Alternate Name' Uses the non-standard name: :after	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none. Notes' Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties. Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :after	Opera Android Full support 10.1 Full support 10.1 Full support 10.1 Alternate Name' Alternate Name' Uses the non-standard name: :after	Safari iOS Full support 3.2 Full support 3.2 Full support 3.2 Alternate Name' Alternate Name' Uses the non-standard name: :after	Samsung Internet Android Full support 1.0 Full support 1.0 Full support 1.0 Alternate Name' Alternate Name' Uses the non-standard name: :after
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.

See also

• ::before
• content

::after (:after) by Mozilla Contributors is licensed under CC-BY-SA 2.5.