References

Beginner-friendly references for web development, with live, editable examples.

The CSS ::after selector

Selector CSS All modern browsers Updated
Quick answer

The CSS ::after pseudo-element inserts generated content at the very end of an element, set with the content property — a::after { content: " ↗"; } appends an arrow to a link. Like ::before, it needs a content value to appear and should only carry decorative content.

Overview

::after is the mirror of ::before: it inserts a pseudo-element as the last child of the element you target, filled with the content property. a[target="_blank"]::after { content: " ↗"; } adds an external-link arrow after such links, for example.

The same essentials apply: it needs a content value to render (often content: "" for a decorative shape), and you can style it like any box — size it, color it, position it. It is the workhorse behind appended icons, decorative underlines and flourishes, tooltip arrows, and the old clearfix hack (.clearfix::after { content: ""; display: block; clear: both; }).

And the same caution holds: generated content is decorative and not reliably read by assistive technology, so keep anything meaningful in the real markup. Used for polish, ::after and ::before together let you add a surprising amount of visual detail with no extra HTML.

Syntax

/* arrow after external links */
a[target="_blank"]::after {
  content: " ↗";
}

/* the classic clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Example

Live example 
<style>
  a { color: #1c7ce9; text-decoration: none; font: 600 15px system-ui, sans-serif; }
  a.ext::after { content: " ↗"; }
  .price::after { content: " / month"; color: #64748b; font-weight: 400; font-size: 0.85em; }
</style>
<a class="ext" href="#">External link</a>
<p class="price" style="font:700 22px system-ui,sans-serif;">$9</p>

Best practices

  • Set the content property (even empty) or ::after will not render.
  • Keep its content decorative — never put essential information in a pseudo-element.
  • Use it for appended icons, decorative shapes, tooltip arrows and the clearfix pattern.
  • Pair it with ::before to add detail at both ends with no extra markup.

Accessibility

As with ::before, content inserted by ::after is not reliably exposed to assistive technology, so it must stay decorative. An appended arrow or icon is fine as a visual hint, but if the meaning matters — "opens in a new tab", say — convey it in the markup too, for instance with visually-hidden text or an appropriate attribute, rather than relying on the pseudo-element alone.

Frequently asked questions

What does ::after do in CSS?
It inserts generated content at the end of an element, set with the content property, e.g. a::after { content: " ↗"; }.
What is the difference between ::before and ::after?
::before adds content at the start of the element; ::after adds it at the end.
Why is my ::after not appearing?
It requires a content value. Add at least content: "" for it to render.
What is the clearfix and does it still matter?
It is the ::after { content: ""; clear: both; } trick for containing floats. Modern flexbox and grid layouts rarely need it now.
+ [attribute]