Псевдоэлемент CSS ::before
Псевдоэлемент ::before — это элемент сгенерированного содержимого, который вставляет любой вид содержимого перед содержимым элемента. Его можно использовать для вставки символов, текстовых строк и изображений. Значение определяется свойством content.
По умолчанию псевдоэлемент ::before является строчным.
Этот псевдоэлемент можно анимировать, позиционировать или обтекать (float), как и любой другой контент.
Псевдоэлемент ::before также можно использовать с синтаксисом с одним двоеточием :before, который поддерживается всеми браузерами.
Псевдоэлемент ::after добавляет содержимое после любого другого содержимого, тогда как псевдоэлемент ::before добавляет содержимое перед любым другим содержимым в HTML.
INFO
Псевдоэлементы, создаваемые с помощью ::after и ::before, не применяются к заменённым элементам (например, <br>, <img>).
Версия
Синтаксис
Псевдоэлемент CSS ::before
::before {
css declarations;
}Пример использования псевдоэлемента ::before:
Быть или не быть|Пример псевдоэлемента CSS ::before|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: " William Shakespeare -";
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>В следующем примере к содержимому можно добавить стили.
Пример псевдоэлемента ::before со стилизованным содержимым:
Уильям Шекспир|Пример псевдоэлемента CSS ::before|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "William Shakespeare-";
display: inline-block;
background-color: #ccc;
color: #666;
border: 2px dotted #000;
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>note
Для чисто декоративных псевдоэлементов всегда задавайте
content: '', чтобы они корректно отображались во всех браузерах.
Практика
Что делает псевдоэлемент '::before' в CSS?