::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:

/* Добавление иконки перед ссылкой */
a::before {
  content: url('icon.png');
  margin-right: 5px;
}

/* Добавление декоративной линии после заголовка */
h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: blue;
  margin-top: 5px;
}

Пример использования ::first-line и ::first-letter:

/* Стилизация первой строки абзаца */
p::first-line {
  font-weight: bold;
}

/* Стилизация первой буквы абзаца */
p::first-letter {
  font-size: 2em;
  color: red;
}

Пример использования ::selection:

/* Стилизация выделенного текста */
::selection {
  background-color: yellow;
  color: black;
}

Пример использования ::placeholder:

/* Стилизация текста-заглушки */
input::placeholder {
  color: gray;
  font-style: italic;
}

Пример использования ::marker:

/* Стилизация маркеров списка */
li::marker {
  color: green;
  content: '🔥 '; /* Использование эмодзи в качестве маркера */
}

Какие псевдоэлементы CSS вы знаете и используете?