Руководство по CSS

Псевдо-класс

::before

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

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

К примеру, предположим что у вас есть цитата с каким-нибудь текстом. Вы можете использовать псевдо-элемент ::before чтобы вставить кавычки перед текстом. Кавычки будут отображаться на странице, но не будут добавлены в DOM.

<blockquote>
    Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein
</blockquote>

Следующий фрагмент кода добавляет красивые кавычки к цитате используя псевдо-элемент ::before. Кавычки будут добавлены внутри тега blockquote, перед текстом цитаты и на одном уровне.

blockquote::before {
    content: "\201C";
    /* стиль цитаты */
    color: deepPink;
    font-size: 3em;
    position: relative;
    top: 20px;
}

Кавычки определяется внутри свойства content, посредством Unicode символа.

Результат:

See the Pen add quote with before by Siteacademy (@Siteacademy) on CodePen.

Поскольку контент вставляется с использованием псевдо-элемента, он не добавляется в DOM, так как нельзя увидеть и редактировать вставленное содержимое с помощью средства разработки браузера. Тем не менее, в Chrome 32+ и Firebug для Firefox позволяет вам увидеть позицию псевдо-элемента в DOM, выбрав его можно просмотреть стили, связанные с ним в панели CSS. Результат просмотра в инспекторе:

css before

Приведенный выше демонстрационный пример также показывает, что контент добавленный при помощи псевдо-элемента ::before позиционируется линейно.

Так контент, добавленный псевдо-элементом ::before также означает, что псевдо-элемент будет располагаться поверх других элементов, которые находятся непосредственно перед ним в DOM.

Псевдо-элемент может быть использован для вставки практически любого контента, в том числе символов, строки текста и изображений. Например, ниже представлены правильные способы применения псевдо-элемента ::before:

.element::before {
    content: url(path/to/image.png); /* изображение */
}

.element::before {
    content: "Note: "; /* строка */
}

.element::before {
    content: "\201C"; /* unicode символ */
}

Изображения, вставленные с помощью псевдо-элементов не могут быть изменены. Они вставляются как есть, поэтому прежде чем вставить изображение, не забудьте сделать его нужного размера.

Следующий фрагмент кода добавляет для всех параграфов с классом .note, строку - "Примечание: ", перед основным текстом параграфа.

p.note {
    font-style: italic;
    color: grey;
}

p.note::before {
    content: "Примечание: ";
    color: red;
}

Живое демо вы можете увидеть в соответствующей секции ниже.

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

Псевдо-элемент ::before может быть стилизован так же как любой другой, его можно сделать плавающим, сменить позиционирование и даже анимировать. (Анимирование псевдо-элементов поддерживается не во всех браузерах. Для получения дополнительной информации смотрите ниже раздел поддержки браузеров.)

Псевдо-элементы стилизуются точно также как и простые элементы, но обычно их используют в основном для "косметических" целей. Псевдо-элементы очень часто используются для создания геометрических фигур в CSS. Смотрите демонстрационный пример ниже. Восьмиугольную звезду можно создать с помощью простого элемента и с добавлением к нему псевдо-элемента. Обычный элемент - это простой квадрат. Псевдо-элемент имеет тот же стиль, но с поворотом на 45 градусов, тем самым образуя звезду из восьми углов.

See the Pen Eight-point star ::before by Siteacademy (@Siteacademy) on CodePen.

Данный пример можно создать аналогичным образом, используя псевдоэлемент ::after.

Примечания

Различное условное обозначение: (:) и (::)

Скорее всего, вы столкнетесь (или уже сталкивались) с обозначениями псевдо-элемента :before при котором используют одно двоеточие, либо два.

В CSS1 и CSS2 псевдо-элементы обозначались с одним двоеточиеем (:), так же как и псевдо-классы (например :hover). В CSS3, ввели обозначение с двойными двоеточием (::), для того чтобы бы было легче отличать их от псевдо-классов.

/* старый синтаксис CSS2 */
.element:after {
    // css
}

/* новый синтаксис CSS3 */
.element::after {
    // css
}

Все браузеры которые поддерживают обозначения двойного двоеточия, также поддерживают обозначения одного двоеточия. Internet Explorer 8, не поддерживает обозначения двойного двоеточия. Поэтому если вам не нужно поддерживать IE8, вы можете смело использовать двойное двоеточие по стандарту CSS3.

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

Доступность

Контент добавленный с помощью псевдо-элементов не добавляется в DOM, а отображается только визуально. Кроме того, так как их не существует в DOM, вы не сможете к ним обратиться по средством JavaScript.

Псевдо-элементы в основном используются для вставки и стилизации дополнительного контента, и не следует добавлять контент который имеет отношение к смыслу и полноте содержания всей страницы.

Примеры

С использованием псевдо-элементов, в том числе ::before разрабатывается огромное количество различных компонентов и эффектов. В дополнение к указанным выше примерам, следующие статьи содержат некоторые примеры использования псевдо-элементов:

Живой пример

See the Pen pseudo-element ::before example by Siteacademy (@Siteacademy) on CodePen.

Поддержка браузеров

Псевдо-элемент :before с одним двоеточием, поддерживается в Chrome, Firefox, Safari, Opera, Internet Explorer 8+, Android и iOS.

Псевдо-элемент :before с двойным двоеточием, поддерживается во всех браузерах, но в Internet Explorer только с 9 версией и выше.

Анимированние псевдо-элементов поддерживается в Chrome 26+, Firefox 4+, Safari 6.1+, Opera и Internet Explorer 10+.

Примечание

Internet Explorer не поддерживает использование z-index с псевдо-элементами.

Связанные статьи

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.