Что такое псевдоэлементы и для чего они нужны?

Псевдоэлементы

CSS pseudo-element — ключевое слово в селекторе для стилизации части элемента. Их используют для декора (::first-line, ::first-letter) или добавления «виртуальных» кусков через content без правки разметки (::before, ::after).

Примеры:

• оформление первой строки/буквы;
• clearfix-хак с нулевым ::after и clear: both;
• треугольники у тултипов через ::before/::after — графика как часть стиля, а не DOM.

.quote::before {
  content: "«";
}
.quote::first-line {
  font-weight: 700;
}

Итог

Псевдоэлементы — стилизовать фрагмент или вставить декоративный слой, не раздувая HTML.