Before css что это

Псевдоэлемент ::before

Псевдоэлемент ::before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content .

Для ::before характерны следующие особенности.

При добавлении ::before к блочному элементу, значение свойства display может быть только: block , inline , none , marker . Все остальные значения будут трактоваться как block .
При добавлении ::before к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .
::before наследует стиль от элемента, к которому он добавляется.

Синтаксис

Значения

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента ::before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Использование псевдоэлемента ::before в списках

Рис. 1. Использование псевдоэлемента ::before в списках

Браузеры

Браузер Internet Explorer до версии 9.0 работает только с нотацией :before , описанной в спецификации CSS 2.1.

CSS по теме

::before (:before)

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content . По умолчания является инлайновым.

/* Добавить сердце перед ссылками */ a::before  content: "♥"; >

Примечание: Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как или .

Синтаксис

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 взаимодействуют с другими элементами. как если бы они были настоящими элементами, добавленными в соответствующий им элемент.»), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент , как в примере ниже, вместо того чтобы добавлять два пустых элемента до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

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

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

: : before

Удобный способ создать элемент без дополнительной HTML-разметки.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 14 июня 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Когда мы в CSS добавляем : : before к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый первый потомок, он идёт до внутреннего содержимого.

Пример

Скопировать ссылку «Пример» Скопировано

 a::before  content: "♥";> a::before  content: "♥"; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 ::before  /* Для CSS 3 */> :before  /* Для CSS 2 */> ::before  /* Для CSS 3 */ > :before  /* Для CSS 2 */ >

�� В CSS 3 версии ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировать ссылку «Как понять» Скопировано

Проще всего воспринимать псевдоэлемент : : before как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.

Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое перед текстом, либо выступая в роли дополнительного стилизованного блока.

По умолчанию псевдоэлемент : : before является строчным.

Самый простой пример использования : : before — добавление иконки перед важным текстом:

   Внимание! Этот абзац является важным предупреждением!   Этот абзац является информационным.  div class="message"> p class="warning">Внимание! Этот абзац является важным предупреждением!p> div> div class="message"> p class="info">Этот абзац является информационным.p> div>

 .warning::before  content: "⚠"; margin-right: 0.5em;> .warning::before  content: "⚠"; margin-right: 0.5em; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Не забывайте прописывать свойство content для псевдоэлемента : : before . Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

�� Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

�� Псевдоэлемент : : before очень часто используют для стилизации нестандартных маркеров списка:

 li::before  content: "��"; margin-right: 5px;> li::before  content: "��"; margin-right: 5px; >

�� Пример с пустым свойством content :

 li  position: relative; padding-left: 25px;> li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px;> li  position: relative; padding-left: 25px; > li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px; >

Псевдоэлементы ::after и ::before

::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для , и ряда других элементов.

В примере 1 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 1. Применение ::after

Результат примера показан на рис. 1.

Добавление текста к абзацу с помощью ::after

Рис. 1. Добавление текста к абзацу с помощью ::after

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .

По своему действию ::before аналогичен ::after , но вставляет псевдоэлемент до содержимого элемента. В примере 2 показано добавление маркеров своего типа к пунктам списка посредством сокрытия стандартных маркеров и применения псевдоэлемента ::before .

Пример 2. Использование ::before

Результат данного примера показан на рис. 2.

Изменение вида маркеров с помощью ::before

Рис. 2. Изменение вида маркеров с помощью ::before

В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content .

Блок с цитатой

::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).

Вид цитаты с кавычками

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before , а после текста — ::after . К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

Хлебные крошки

Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).

Хлебные крошки

Рис. 4. Хлебные крошки

Пример 4. Хлебные крошки

См. также

content
quotes
relative и absolute
Аккордеон меню
Анимация ссылок при наведении
Атрибуты ссылок
Добавление тени
Использование в вёрстке
Не только текст
Очистка float
Подробнее о позиционировании
Псевдоэлемент ::after
Псевдоэлемент ::before
Псевдоэлементы
Работа с типографикой
Синтаксис CSS
Спойлер
Текст в HTML

Before css что это

Псевдоэлемент ::before

Синтаксис

Значения

Браузеры

CSS по теме

::before (:before)

Синтаксис

Примеры

Добавление кавычек

HTML

CSS

Результат

Пример оформления

HTML

CSS

Результат

Список дел

HTML

CSS

JavaScript

Результат

Примечания

HTML

CSS

Результат

Спецификации

Поддержка браузерами

Смотрите также

Found a content problem with this page?

MDN

Support

Our communities

Developers

: : before

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Денис Ежков советует

Псевдоэлементы ::after и ::before

Блок с цитатой

Хлебные крошки

См. также

Добавить комментарий Отменить ответ