::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 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */ .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…