Описание
Псевдо-элемент ::before позволяет вставлять до элемента генерируемое содержимое, и применять к нему специальные стили.
Для вставки требуемого содержимого используется свойство content.
| ::before | |
|---|---|
| Значения: | нет |
| Начальное значение: | нет |
| Область применения: | все элементы |
| Наследование: | нет |
| Поддержка браузерами: | Internet Explorer 8+, Chrome 1+, Opera 7+, Safari 1+, Firefox 1+ |
| Версия CSS: | CSS 3 |
| Примечание: | |
Синтаксис
CSS2
element:before {style properties}CSS3
element::before {style properties}Обозначение ::before было введено в спецификации CSS3 для установления различий между псевдо-классами и псевдо-элементами. :before относится к спецификации CSS2.
Internet Explorer 8 поддерживает только
:before. Поддержка ::before только с версии 9.Пример
С помощью ::before можно, например, обозначить в тексте элементы, обозначенные тегом <b>, а также, выделить новые элементы.
.new::before {
content: «NEW «;
color: red;
}
b::before {
content: «@»;
}
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>::before</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, lorem velit. Placerat vehicula nesciunt. Pede donec rhoncus, orci arcu. Magna placerat, pretium ut vivamus. Dui lacus arcu, neque quaerat enim.</p>
<p class="new">A duis. Est diam felis. Pellentesque blandit, non placerat id. Pede mattis hendrerit, volutpat convallis mauris. Quisque est enim, tempore metus.</p>
<p>Cras nostra, ac facilisis mi, viverra proident. Dolor quisque in, ipsum eget. Nam egestas, commodo lectus justo. Et dignissim pede, aliquam turpis pede. Nec pulvinar. Dictum enim ultrices, odio eleifend ut.</p>
<p>Lorem ipsum <b>dolor</b> sit amet, quisque nulla risus, ultrices aenean suscipit.</p>
</body>
</html>