Зачем нужны псевдоэлементы

Псевдоэлементы (::before, ::after) позволяют добавлять декоративный контент без изменения HTML. Они полезны для:

1. Декоративных элементов – иконки, разделители, подчёркивания
2. Генерации контента – нумерация, подписи через content
3. Оптимизации DOM – меньше узлов в дереве

Пример:

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

Особенности:

• Работают только с display: block/inline-block
• content обязателен (даже пустой content: "")
• Не влияют на доступность (скринридеры их игнорируют)