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

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

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

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

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

.button::after {
  content: "→";
  margin-left: 5px;
}

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