Что такое псевдоэлементы в CSS и для чего они нужны?

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

• специальные CSS-конструкции для создания виртуальных элементов
• формируются браузером и не входят в DOM
• добавляют дополнительные части элемента, например ::before и ::after
• позволяют оформлять содержимое без изменения HTML-разметки
• применяются для добавления декоративных деталей средствами CSS
• ключевое свойство — content, необходимое для отображения
• помогают сократить количество вспомогательных тегов в HTML

Развёрнутый ответ

Краткий ответ

Псевдоэлементы — специальные средства CSS, с помощью которых можно стилизовать отдельные части элементов, не добавляя в HTML новые теги. Браузер создаёт их как виртуальные "элементы": в DOM они не представлены, но к ним можно применять стили, вставлять содержимое и оформлять, например, первую букву текста.

Основные моменты

• К наиболее часто используемым псевдоэлементам относятся ::before и ::after — они добавляют содержимое перед или после контента элемента и подходят для декоративного оформления. Псевдоэлементы ::first-letter и ::first-line применяются соответственно для стилизации первой буквы и первой строки.
• В CSS3 для псевдоэлементов рекомендуется синтаксис с двойным двоеточием — ::. Это позволяет отличать их от псевдоклассов, записываемых как :. При этом одинарное двоеточие всё ещё используется для обеспечения обратной совместимости.
• Хотя псевдоэлементы не меняют структуру документа, они влияют на его визуальное отображение. Благодаря этому можно сохранить семантичную HTML-разметку и не создавать дополнительные элементы без необходимости.

Пример из практики

В прикладных проектах ::before и ::after нередко применяют для вывода иконок, создания декоративных эффектов и реализации clearfix без JavaScript. Например, в проекте на React 18 со Styled Components такой подход помогает поддерживать чистоту кода и избегать лишних div или span, предназначенных только для визуального оформления.