В каких случаях следует использовать псевдоэлементы before и after?

Псевдоэлементы ::before и ::after в CSS следует использовать для добавления декоративных элементов и контента без изменения HTML. sky.pro

Некоторые ситуации, в которых применяют эти псевдоэлементы:

• Создание оформления. sky.pro Например, с помощью ::before и ::after можно добавить рамку вокруг фотографий, не загромождая HTML-код дополнительными элементами. sky.pro
• Оформление цитат. webref.ru Для отображения кавычки перед текстом используют ::before, а после текста — ::after. webref.ru
• Добавление маркеров к пунктам списка. webref.ru Псевдоэлемент ::before позволяет скрыть стандартные маркеры и добавить маркеры своего типа. webref.ru
• Отображение значений атрибутов. webformyself.com Например, если используется виджет на основе JavaScript, который хранит какое-то значение в качестве атрибута, можно автоматически отобразить этот атрибут. webformyself.com

Однако у псевдоэлементов есть ограничения: они не могут быть применены к самозакрывающимся тегам, таким как <img> или <input>, и не могут содержать дополнительных HTML-элементов. sky.pro