Для чего нужны псевдоэлементы?

Продвинутые темы

Псевдоэлементы нужны, чтобы стилизовать определённую часть элемента или добавить декоративный контент через CSS, не изменяя HTML.

Для чего используют

Декоративный контент (::before, ::after)

Добавить иконку, метку, стрелку без лишних тегов в разметке:

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

Типографика (::first-letter, ::first-line)

Буквица, оформление первой строки.

Стилизация служебных частей

::placeholder — текст-подсказка поля ввода.
::selection — выделенный текст.
::marker — маркер списка.

Зачем это удобно

Чистая разметка — декор в CSS, а не в HTML.
Меньше «мусорных» тегов для оформления.
Легко управлять из стилей (в т. ч. по состоянию :hover::after).

Нюансы

::before/::after требуют свойство content.
Сгенерированный контент не для важного текста (не копируется, а скринридеры обычно его озвучивают, но не везде одинаково).

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

Псевдоэлементы нужны для стилизации части элемента или добавления декоративного контента без лишних тегов: ::before/::after (иконки, стрелки — требуют content), ::first-letter (типографика), ::placeholder, ::selection. Держат разметку чистой.