Справочник HTML & CSS

::after

Создаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.

Синтаксис

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

Примеры

Стрелка после внешних ссылок:

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

Короткая декоративная полоса под заголовком:

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

Примечания

Как и ::before, ему нужно свойство content. Абсолютно позиционированный псевдоэлемент размещается относительно ближайшего позиционированного предка, поэтому самому элементу задайте position: relative.

См. также

::before — Создаёт виртуальный первый дочерний элемент — для декоративного текста или фигур.
content — Содержимое псевдоэлементов `::before` и `::after`.
position — Как позиционируется элемент: в обычном потоке или по смещениям.

Вопросы и ответы по теме

В учебнике

Псевдоэлементы — Как оформить часть элемента или добавить декоративное содержимое — before, after, first-letter, marker, placeholder и selection.

Спасибо, что читаете!