Псевдоэлементы

selector::pseudo-element {
  property: value;
}

Например, ::first-line можно использовать для изменения шрифта первой строки абзаца.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Двойные двоеточия (::) используются для псевдоэлементов. Это отличает псевдоэлементы от псевдоклассов, которые используют одиночное двоеточие (:) в своей записи.

Псевдоэлементы не существуют независимо. Элемент, частью которого является псевдоэлемент, называется его исходным элементом. Псевдоэлемент должен появляться после всех других компонентов в сложном или составном селекторе. Последний элемент в селекторе является исходным элементом псевдоэлемента. Например, вы можете выбрать первую строку абзаца, используя p::first-line, но не потомков этой первой строки. Поэтому p::first-line > * недействительно.

Псевдоэлемент может выбираться на основе текущего состояния исходного элемента. Например, p:hover::first-line выбирает первую строку (псевдоэлемент) абзаца, когда сам абзац находится под курсором (псевдокласс).

Псевдоэлементы, определенные набором спецификаций CSS, включают следующие:

A

• ::after

B

• ::backdrop
• ::before

C

• ::cue (и ::cue())

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::placeholder

S

• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text Экспериментально

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

• Модуль CSS псевдоэлементов
• Псевдоклассы
• Модуль CSS селекторов
• CSS учебные блоки: Псевдоклассы и псевдоэлементы