Псевдоэлемент ::before - это элемент сформированного контента, который добавляет содержимое любого вида перед контентом.
Значение определяется с помощью свойства content.
По умолчанию псевдоэлемент ::before становится строчным.
Псевдоэлемент ::before может быть использован для вставки контента любого вида, включая символы, строки текста и изображения.
Он может быть анимирован, позиционирован и выровнен подобно другим контентам.
Псевдоэлемент ::before может также быть использован вместе с :before, который поддерживается всеми браузерами.
Версия
CSS2
Синтаксис
::before {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p::before {
content: " William Shakespeare -";
}
</style>
</head>
<body>
<h2>Пример селектора ::before</h2>
<p>"Be or not to be".</p>
</body>
</html>В следующем примере к контенту могут быть добавлены стили:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p::before {
content: "William Shakespeare-";
background-color: #ccc;
color: #666;
border: 2px dotted #000;
}
</style>
</head>
<body>
<h2>Пример селектора ::before</h2>
<p>"Be or not to be".</p>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |
Практикуйте свои знания
What is the purpose of the ::before pseudo-element in CSS?
Правильный!
Неправильно!