Псевдоэлементы можно сравнить с виртуальными элементами. Они не существуют в дереве документа, т.е. они создаются с помощью CSS, но их можно обрабатывать и стилизовать как обычные элементы HTML.
2 самых часто используемых псевдоэлемента – это :before и :after.
Псевдоэлемент :before добавляет содержимое (например, текст) перед контентом элемента, заданного в селекторе. Обязательным условием при этом является добавления CSS-свойства content.
Интересно, что добавленный в псевдоэлемент текст нельзя выделить.
h1:before {content: "Вставка перед контентом";}
Псевдоэлемент :after также используется для добавления содержимого, но уже после контента элемента, заданного в селекторе.
h1:after {content: "Вставка после контента";}
Псевдоэлемент :first-letter выбирает первый символ в строке текста.
h1:first-letter {font-size: 5em;}
Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.
p:first-line {background: orange;}
Псевдоэлемент :selection используется для стилизации выделенного текста.
:selection {color: orange; background: #333;}
