Псевдоэлементы в CSS — это специальные элементы, которых не существует в исходном HTML-коде. 5 Чаще всего их используют для стилизации. 5

Некоторые способы применения псевдоэлементов для стилизации изображений:

• Создание эффектов наложения слоёв. 4 Например, можно сделать затемнение поверх картинки, чтобы текст был виден пользователю и читался. 4
• Добавление кастомных иконок. 4 С помощью псевдоэлементов можно создавать иконки для списков, используя даже эмодзи. 4
• Создание фигур. 2 Каждый из псевдоэлементов можно отдельно преобразовать, расположить и повернуть. 2
• Отображение значений атрибутов. 2 Например, можно автоматически отобразить атрибут, если используется виджет на основе JavaScript, который хранит какое-то значение в качестве атрибута. 2
• Создание многоступенчатой анимации. 2 Можно анимировать основной элемент в одном направлении, а затем независимо анимировать каждый псевдоэлемент. 2

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