Зачем нужен after

Псевдоэлемент ::after в CSS используется для добавления контента после элемента без изменения HTML. Он часто применяется для:

1. Декоративных элементов (иконки, разделители)
2. Очистки float через clearfix
3. Добавления вспомогательного контента

Пример:

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  display: none;
}

.tooltip:hover::after {
  display: block;
}

Ключевые особенности:

• Требует свойства content (даже пустого: content: "")
• По умолчанию инлайновый
• Не влияет на DOM, только на отображение
• Может быть стилизован как обычный элемент