Обычно ::before и ::after вспоминают для кавычек, декоративных линий или иконок. Но ими удобно решать и менее очевидные задачи: например, добавить к ссылке внешний значок, показать обязательность поля, оформить маркер списка или создать слой для затемнения карточки при наведении. Разметка при этом остаётся чище — если элемент чисто декоративный и не несёт самостоятельного смысла.
Мне особенно нравится приём с дополнительной областью клика: псевдоэлементом можно растянуть ссылку на всю карточку, не оборачивая в неё заголовок, картинку и остальные элементы. Ещё ::after помогает сделать уголок у подсказки или стрелку без отдельного HTML. Но тут важно не переборщить: сложную графику и повторно используемые компоненты иногда проще и понятнее оставить в разметке или вынести в SVG.
Есть и подводные камни. Контент из content не всегда доступен и удобен для скринридеров, поэтому важный текст лучше не прятать в псевдоэлемент. А если значок зависит от состояния, стоит проверить контраст, фокус клавиатуры и поведение при увеличении текста. Какие необычные применения вы реально оставили в проекте? Где псевдоэлементы оказались удачным решением, а где потом пришлось всё переделывать?
Мне особенно нравится приём с дополнительной областью клика: псевдоэлементом можно растянуть ссылку на всю карточку, не оборачивая в неё заголовок, картинку и остальные элементы. Ещё ::after помогает сделать уголок у подсказки или стрелку без отдельного HTML. Но тут важно не переборщить: сложную графику и повторно используемые компоненты иногда проще и понятнее оставить в разметке или вынести в SVG.
Есть и подводные камни. Контент из content не всегда доступен и удобен для скринридеров, поэтому важный текст лучше не прятать в псевдоэлемент. А если значок зависит от состояния, стоит проверить контраст, фокус клавиатуры и поведение при увеличении текста. Какие необычные применения вы реально оставили в проекте? Где псевдоэлементы оказались удачным решением, а где потом пришлось всё переделывать?
Комментарии 9
Обсуждение темы — по порядку