Ответ
Псевдоклассы (:hover, :active, :nth-child()) применяют стили к элементам в определенном состоянии или позиции в DOM. Псевдоэлементы (::before, ::after, ::first-line) создают виртуальные элементы, которых нет в разметке.
/* Псевдокласс - стиль при наведении */
button:hover {
background: red;
}
/* Псевдоэлемент - создает контент перед элементом */
button::before {
content: "★";
}Ключевые отличия:
- Псевдоклассы — одно двоеточие (
:), псевдоэлементы — два (::), хотя старые браузеры поддерживают и:для псевдоэлементов. - Псевдоклассы меняют существующие элементы, псевдоэлементы добавляют новые.
- Псевдоэлементы могут иметь
content, псевдоклассы — нет.