Ответ
Псевдоклассы (:hover, :active, :nth-child()) применяют стили к элементам в определенном состоянии или позиции в DOM. Псевдоэлементы (::before, ::after, ::first-line) создают виртуальные элементы, которых нет в разметке.
/* Псевдокласс - стиль при наведении */
button:hover {
background: red;
}
/* Псевдоэлемент - создает контент перед элементом */
button::before {
content: "★";
}Ключевые отличия:
- Псевдоклассы — одно двоеточие (
:), псевдоэлементы — два (::), хотя старые браузеры поддерживают и:для псевдоэлементов. - Псевдоклассы меняют существующие элементы, псевдоэлементы добавляют новые.
- Псевдоэлементы могут иметь
content, псевдоклассы — нет.
Ответ 18+ 🔞
А, слушай, про эти ваши псевдоклассы и псевдоэлементы! Ну, это ж классика, блядь, хуй запутаешься, если не понимать, в чём подвох.
Смотри, вот представь: псевдокласс — это как состояние твоей башки в пятницу вечером. Вот элемент есть, он лежит себе в разметке, нормальный такой button. А ты на него наводишь курсор — и он, сука, меняется! Становится красным, потому что у него сработал псевдокласс :hover. То есть это не новый элемент, это он сам, просто в другом, ебучем, состоянии. :active — это когда ты на него уже кликнул и держишь, :nth-child(3) — это когда он третий по счёту у своей мамки-родителя. Всё просто, блядь.
А псевдоэлементы — это уже, ёпта, чистая магия, нахуй. Их в разметке-то вообще нет! Это как призраки, которых ты материализуешь стилями. Вот есть у тебя та же кнопка. А ты такой: «А добавь-ка ты, сука, перед собой звёздочку!». И она, блядь, добавляет! Через ::before { content: "★"; }. Или после текста (::after) какую-нибудь хуйню. Или первой строке параграфа (::first-line) цвет меняет. Это уже новые, виртуальные элементы, их CSS породил из ниоткуда, ядрёна вошь!
Короче, запомни две главные вещи, чтобы не быть, прости господи, полупидором на собеседовании:
- Синтаксис, блядь. Псевдоклассы — одно двоеточие (
:), типа:hover. Псевдоэлементы — в идеале два (::), типа::before. Хотя старые браузеры жрут и одно, но ты-то будь умнее, пиши правильно. - Суть, ебать. Псевдокласс — это состояние существующего элемента. Псевдоэлемент — это новый элемент, которого изначально не было. И да, только у псевдоэлементов может быть свойство
content, иначе они, блядь, не появятся!
Вот и вся разница. Не усложняй, а то голова заболит.
/* Это псевдокласс - кнопка СТАЛА красной при наведении */
button:hover {
background: red;
}
/* А это псевдоэлемент - кнопка СОЗДАЛА звёздочку перед собой */
button::before {
content: "★";
}