This page was translated from English by the community. Learn more and join the MDN Web Docs community.
::before
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчания является инлайновым.
/* Добавить сердце перед ссылками */
a::before {
content: "♥";
}
Примечание:
Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам , таким как <img> или <br>.
Синтаксис
Error: could not find syntax for this itemПримечание:
В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :before, введённую в CSS2.
Примеры
Добавление кавычек
Этот простой пример использования псевдоэлементов ::before позволяет добавлять кавычки. Здесь используется как псевдоэлемент ::before, так и ::after
HTML
<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>
CSS
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
Результат
Пример оформления
Можно стилизовать текст или изображения в свойстве content практически любым способом.
HTML
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
CSS
.ribbon {
background-color: #5bc8f7;
}
.ribbon::before {
content: "Посмотрите на этот оранжевый прямоугольник.";
background-color: #ffba10;
border-color: black;
border-style: dotted;
}
Результат
Список дел
В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.
HTML
<ul>
<li>Купить молока</li>
<li>Сходить на прогулку с собакой</li>
<li>Тренироваться</li>
<li>Написать код</li>
<li>Слушать музыку</li>
<li>Отдыхать</li>
</ul>
CSS
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #ccff99;
}
li.done::before {
content: "";
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
JavaScript
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("done");
}
},
false,
);
Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом ::before, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.
Результат
Примечания
Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <span>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <div/> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)
HTML
<div class="example">
<span id="floatme"
>"Плавающий перед" будет добавлен слева от текста и не позволит переполнению
этой строки обтекать его снизу. Аналогично, "Плавающий после" будет добавлен
справа от текста и не позволит переполнению этой строки обтекать его
снизу.</span
>
</div>
CSS
#floatme {
float: left;
width: 50%;
}
/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте 0000円a0, если за этим пробелом следуют другие символы) */
.example::before {
content: "Плавающий перед";
float: left;
width: 25%;
}
.example::after {
content: "Плавающий после";
float: right;
width: 25%;
}
/* Для стилизации */
.example::before,
.example::after {
background: yellow;
color: red;
}
Результат
Спецификации
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # generated-content |
Совместимость с браузерами
Loading...