Пример использования псевдоэлементов для стилизации части элемента в CSS

Что проверяют

Знаете ли вы, что часть оформления делается без лишних узлов в разметке, и видите ли границы приёма. Вопрос простой, но по ответу понятно, писали ли вы CSS руками или только собирали готовые компоненты.

Как отвечать

Скажите главное: ::before и ::after создают не отдельные элементы, а сгенерированное содержимое внутри целевого, первым и последним его потомком. Появляются они, только если задано свойство content, пусть даже пустой строкой.

.badge { position: relative; }
.badge::after {
  content: attr(data-count);
  position: absolute;
  top: -6px;
  right: -6px;
}

Типовые задачи: декоративная стрелка у кнопки, обязательная звёздочка у поля формы, кавычки у цитаты, нумерация через counter(), подпись из атрибута через attr().

Дальше перечислите те псевдоэлементы, что оформляют именно часть элемента: ::first-letter и ::first-line берут первую букву и первую строку без обёрток в разметке, ::selection задаёт вид выделенного текста, ::placeholder оформляет подсказку в поле, ::marker отвечает за маркер списка.

Сильный ответ заканчивается разницей в синтаксисе: одно двоеточие это псевдокласс, то есть состояние (:hover), два двоеточия это псевдоэлемент, то есть часть элемента. Запись :before с одним двоеточием осталась только ради совместимости со старыми браузерами.

Где спотыкаются

Говорят, что ::after добавляет содержимое после элемента. Оно попадает внутрь, последним потомком, поэтому на него действуют overflow и фон родителя, а абсолютное позиционирование требует position: relative на самом элементе.

Второе: вешают псевдоэлементы на <img>, <input>, <br>. У замещаемых элементов нет собственного содержимого, порождать внутри нечего, и правило молча не срабатывает.

Третье: кладут в content осмысленный текст. Узла в DOM не появляется: обработчик не повесить, поиском по странице не найти, копируется он не везде. Декорация да, содержание нет.