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

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

Наиболее часто используемые псевдоэлементы:

• ::before: Вставляет сгенерированное содержимое перед содержимым выбранного элемента.
• ::after: Вставляет сгенерированное содержимое после содержимого выбранного элемента.
• ::first-line: Применяет стили к первой строке блочного элемента.
• ::first-letter: Применяет стили к первой букве блочного элемента.
• ::selection: Применяет стили к части элемента, выбранной пользователем (например, при выделении текста мышью).
• ::placeholder: Применяет стили к тексту-заполнителю в полях ввода <input> или <textarea>.

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

div::before {
  content: "Префикс: "; // Обязательное свойство content
  color: blue;
}

div::after {
  content: " Суффикс"; // Обязательное свойство content
  color: red;
}

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

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Псевдоэлементы полезны для добавления декоративных элементов, генерации контента, стилизации частей текста и других задач, упрощая HTML-структуру. Исторически они начинались с одного двоеточия (:), но спецификация CSS3 ввела два двоеточия (::) для различения псевдоклассов (:hover, :focus) и псевдоэлементов, хотя один символ двоеточия для совместимости до сих пор поддерживается большинством браузеров для старых псевдоэлементов. Рекомендуется использовать ::.