Какие псевдоэлементы важны на практике и как их применять?

На практике важны псевдоэлементы `::before`, `::after`, `::placeholder`, `::selection`, `::first-line` и `::first-letter` — они стилизуют части элемента или добавляют декоративный контент без изменения HTML.

Основные и их применение

::before и ::after

Вставляют сгенерированный контент; требуют свойство content. Применение: иконки, декор, стрелки тултипов, счётчики, clearfix.

.required::after {
  content: ' *';
  color: red;
}
.tooltip::after {
  content: '';
  border: 6px solid transparent;
  border-top-color: black;
}

::placeholder

Стилизует текст-подсказку в полях ввода.

input::placeholder { color: #999; }

::selection

Оформляет выделенный пользователем текст.

::selection { background: yellow; }

::first-line и ::first-letter

Типографика: буквица, оформление первой строки.

p::first-letter { font-size: 2em; float: left; }

Детали

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

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

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