Что такое псевдо-элементы в CSS

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

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

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

Пример:

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

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