Зачем нужен after?

`::after` — это CSS-псевдоэлемент, который вставляет сгенерированный контент после содержимого элемента. Используется для декора, иконок, счётчиков без изменения HTML.

Что делает

Создаёт виртуальный элемент в конце содержимого целевого элемента; требует свойство content:

.element::after {
  content: '';        /* обязательно, даже пустое */
  /* стили */
}

Применения

Декоративный контент

.required::after {
  content: ' *';
  color: red;
}

Иконки, стрелки (тултипы)

.tooltip::after {
  content: '';
  border: 6px solid transparent;
  border-top-color: black; /* треугольник-стрелка */
}

Clearfix (очистка float)

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

Счётчики, кавычки, разделители

li::after { content: ', '; }

Детали

• Требует `content` — без него не отображается.
• Является inline по умолчанию (можно изменить display).
• Сгенерированный контент не в DOM — его нельзя выделить и скопировать, а скринридеры обычно его озвучивают, но не везде одинаково (не класть важный текст).
• ::after идёт после содержимого, ::before — до.

Коротко для собеседования

::after — псевдоэлемент, вставляющий сгенерированный контент после содержимого элемента (требует content). Для декора, иконок, стрелок тултипов, clearfix, счётчиков — без лишних тегов в HTML. Контент не в DOM (не для важного текста). Парный ::before вставляет до содержимого.