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

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

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

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

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

Также можно использовать элемент <picture>, который поддерживает псевдоэлементы и может стать альтернативой тегу <img>. sky.pro

Важно учитывать особенности браузеров и проверять псевдоэлементы на совместимость. blog.skillfactory.ru