HTML & CSS reference

::after

Creates a virtual last child of the element — for icons, marks and decorations after the content.

Syntax

selector::after { content: "…"; }

Examples

An arrow after external links:

<style>
  a[href^="https"]::after { content: " ↗"; }
</style>
 
<p><a href="https://example.com">An external link</a></p>

A short decorative bar under a heading:

<style>
  .title { position: relative; padding-bottom: 8px; }
  .title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: crimson;
  }
</style>
 
<h3 class="title">Underlined with a short bar</h3>

Notes

Like ::before, it needs the content property. An absolutely positioned pseudo-element is placed relative to the nearest positioned ancestor, so give the element itself position: relative.

Related recipes

In the tutorial

Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.

Thanks for reading!