Что такое псевдоэлемент?

Псевдоэлемент — это CSS-механизм, позволяющий стилизовать определённую часть элемента или добавить сгенерированное содержимое, которого нет в HTML.

Синтаксис

Псевдоэлементы обозначаются двойным двоеточием :: (одинарное : тоже работает для старых, но :: — стандарт).

Основные псевдоэлементы

• ::before — вставляет контент перед содержимым элемента.
• ::after — вставляет контент после.
• ::first-line — стилизует первую строку текста.
• ::first-letter — первую букву.
• ::selection — выделенный пользователем текст.
• ::placeholder — текст-подсказку в поле ввода.

.tooltip::after {
  content: '';           /* обязательно для ::before/::after */
  position: absolute;
  border: 6px solid transparent;
  border-top-color: black;
}

blockquote::before {
  content: '«';
}

Детали

• ::before/::after требуют свойство content (даже пустое), иначе не отображаются.
• Сгенерированный контент не попадает в DOM и не копируется, но скринридеры обычно его озвучивают — важный текст туда не кладут.

Псевдоэлемент против псевдокласса

• Псевдоэлемент (::before) — часть элемента / доп. контент.
• Псевдокласс (:hover) — состояние элемента.

Коротко для собеседования

Псевдоэлемент (::before, ::after, ::first-letter, ::selection) стилизует часть элемента или добавляет сгенерированный контент. Для ::before/::after обязателен content. Отличается от псевдокласса, который описывает состояние.