Как работают ::before и ::after?

Question

::before и ::after создают виртуальные элементы до и после контента элемента.Они требуют свойства content.Эти псевдоэлементы не существуют в DOM.Часто используются для декоративных элементов.

YeaHub · Accepted Answer

Псевдоэлементы ::before и ::after позволяют добавлять визуальный контент без изменения HTML.Определение::before и ::after — это псевдоэлементы, которые создают виртуальные элементы внутри выбранного элемента.Как они работаютПри использовании псевдоэлементов:Элемент должен быть отображаемымСвойство content обязательноПсевдоэлемент ведет себя как inline-элемент по умолчаниюТипичные сценарии использованияНа практике ::before и ::after применяются для:ИконокДекоративных линийОберток и маркеровClearfix-решенийПример.button::before {
  content: "★";
  margin-right: 4px;
}
ОграниченияНельзя добавить интерактивное содержимоеНельзя получить доступ из JavaScript напрямуюНе участвуют в DOM-деревеВывод::before и ::after позволяют расширять визуальную часть интерфейса без усложнения HTML. Это мощный инструмент для декоративной верстки.