Почему используются псевдоэлементы вместо обычных элементов

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

1. Чистоты кода – не загромождают HTML лишними тегами.
2. Динамического контента – можно генерировать текст/иконки через CSS (content: "★").
3. Стилизации – для разделителей, подчёркиваний, декоративных форм.

Пример:

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