Что такое Псевдоэлемент в CSS

Псевдоэлементы — это ключевые слова, добавляемые к селектору, которые позволяют стилизовать определённую часть элемента. Они создают виртуальные элементы, которых нет в DOM, но можно стилизовать.

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

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

Пример:

.button::before {
  content: "→ ";
  color: red;
}

p::first-letter {
  font-size: 2em;
  color: blue;
}

Особенности:

1. ::before и ::after требуют свойства content
2. Двойное двоеточие (::) — современный синтаксис (CSS3)
3. Поддерживают все основные CSS-свойства