::before — вставляет содержимое перед содержимым элемента.::after — вставляет содержимое после содержимого элемента.::first-line — применяет стили к первой строке блочного элемента.::first-letter — применяет стили к первой букве блочного элемента.::selection — применяет стили к фрагменту текста, выделенному пользователем.::placeholder — применяет стили к тексту-заглушке в полях ввода (<input>, <textarea>).::marker — применяет стили к маркерам элементов списка (<li>).::backdrop — применяется к элементу, который находится за элементом (<dialog>, <full-screen>), представленным во весь экран или в модальном окне.::cuetext — применяется к отображаемому тексту субтитров или скрытых титров.::part() — позволяет стилизовать внутренние элементы компонента shadow DOM, которые помечены атрибутом part.::slotted() — позволяет выбирать и стилизовать элементы, которые были вставлены в shadow DOM с помощью <slot>.Наиболее часто использую ::before, ::after, ::first-line, ::first-letter, ::selection, ::placeholder, ::marker. ::backdrop и ::part()/::slotted() использую при работе с кастомными элементами и модальными окнами.
Пример использования ::before и ::after:
cssПример использования ::first-line и ::first-letter:
cssПример использования ::selection:
cssПример использования ::placeholder:
cssПример использования ::marker:
css