В чем разница между Псевдоклассом и Псевдоэлементом в CSS

Псевдоклассы (:hover, :active, :nth-child()) применяют стили к элементам в определенном состоянии или позиции в DOM. Псевдоэлементы (::before, ::after, ::first-line) создают виртуальные элементы, которых нет в разметке.

/* Псевдокласс - стиль при наведении */
button:hover {
  background: red;
}

/* Псевдоэлемент - создает контент перед элементом */
button::before {
  content: "★";
}

Ключевые отличия:

1. Псевдоклассы — одно двоеточие (:), псевдоэлементы — два (::), хотя старые браузеры поддерживают и : для псевдоэлементов.
2. Псевдоклассы меняют существующие элементы, псевдоэлементы добавляют новые.
3. Псевдоэлементы могут иметь content, псевдоклассы — нет.