Псевдоэлементы :before и :after используются для создания нового контента внутри HTML-дерева. 2 Этот контент привязан к определённому элементу и может появляться до него или после. 2

::before позволяет добавить контент перед выбранным элементом. 2 ::after — после. 2

Например, с помощью :before можно добавить маркеры своего типа к элементам списка, а :after — добавить текст в конец абзаца. 3

Для обоих элементов обязательным является свойство content — содержимое псевдоэлемента. 4 С его помощью можно, например, вставить какое-нибудь слово до или после текста. 4 Без свойства content псевдоэлемент не отобразится. 4

Псевдоэлементы применяются на сайте только в оформительских целях, то есть для добавления к элементам определённых дизайнерских решений. 5 С помощью них не рекомендуется добавлять на сайт важную информацию. 5