Зачем нужны псевдоэлементы ::before и ::after в CSS

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

Понимаете ли вы, что псевдоэлементы создают настоящие боксы в раскладке, а не «картинку сбоку», и где их нельзя использовать. Следом спрашивают про доступность: прочитает ли скринридер то, что лежит в content.

Как отвечать

::before и ::after создают сгенерированный бокс первым и последним потомком элемента. Не до и после самого элемента, а внутри него, до и после содержимого. Ключевые правила:

• content обязателен: без него псевдоэлемент не рендерится. Для чисто декоративной фигуры пишут content: "";
• по умолчанию display: inline: чтобы задать размеры, нужен block или inline-block, либо position: absolute при position: relative у родителя;
• не у всех элементов: у <img>, <input> и других замещаемых или пустых элементов их обычно нет, иконку к полю вешают на обёртку;
• нет в DOM: из JS их не выбрать, стили читаются через getComputedStyle(el, "::before"), а клик по псевдоэлементу приходит на сам элемент.

Типичные задачи: иконки и декоративные линии, затемняющий оверлей на карточке через inset: 0, кастомные чекбоксы поверх скрытого input, стрелка у тултипа, текст подсказки из атрибута через attr(data-tip), кавычки через open-quote и свойство quotes, нумерация через counter(). Для clearfix псевдоэлемент больше не нужен, есть display: flow-root.

Про доступность: текст из content многие скринридеры зачитывают, а выделить и скопировать его нельзя. Поэтому смысловое содержимое (цены, подписи, статусы) должно быть в разметке. Для декоративного символа в современных браузерах можно задать пустой альтернативный текст: content: "★" / "".

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

Забывают content и долго ищут, почему не видно оверлея.

Думают, что ::before оказывается снаружи элемента, и удивляются, что он наследует его шрифт и цвет и обрезается его же overflow: hidden.

Вешают ::after на <input> или <img>, получают разное поведение в браузерах и в итоге всё равно переделывают на обёртку.