/* Add an arrow after links */ a::after {   content: "→"; } 

::after (: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.

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

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

<span class="ribbon">Look at the orange box after this text. </span> 

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

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

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

Accessibility concerns

Using an ::after pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications

See also