Css before: &colon;&colon;before — CSS&colon; Cascading Style Sheets — Вебджем.рф

Содержание

Псевдоэлемент :before | htmlbook.ru

Internet Explorer	Chrome	Opera		Safari	Firefox		Android	iOS
8.0+	1.0+	4.0+	9.2	1.0+	1.0+	3.5+	1.0+	1.0+

Краткая информация

Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#before-and-after

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

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

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

Синтаксис

элемент:before { content: «текст» }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li:before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

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

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

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.

Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.

Псевдоэлементы

CSS по теме

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

Статьи по теме

Как применить трансформацию CSS3 к фоновым картинкам
Как сделать ленты на CSS3 без картинок
Начинаем работать с CSS-счётчиками
Псевдоэлементы

Рецепты CSS

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

Before CSS — оригинально, удобно, практично

Псевдоэлементы и псевдоклассы CSS: before, after, hover, active и т.д. — эффективная возможность качественно улучшить и упростить исполнение сайта, не включая в код JavaScript-обработчики на очевидные, не требующие сложной реакции дизайнерские решения, события элементов, диалоги и действия посетителя.

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

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

Отличительная особенность псевдоэлементов

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

Псевдоэлемент ::before CSS позволяет добавить содержание перед элементом, а ::after — после. Содержание может быть различным, от простого текста до сложного форматирования с точки зрения свойств CSS, но не тегов HTML. Псевдоэлемент может быть абсолютно позиционирован внутри того элемента, к которому прикреплен, потому смысл before и after относителен и мобилен. Можно не только указать позицию, но и размеры, цвета, фон, шрифты и использовать другие свойства CSS.

Как и псевдоклассы CSS, before и after предваряются символом «:», но по стандарту CSS3 рекомендуется «::». Протестировать конкретное использование на странице никогда не будет лишним: некоторые браузеры или их версии могут просто не заметить тот или иной псевдоэлемент.

Общие правила использования

Поместив, например, div элемент с описанием и содержанием «Element» на страницу, указав в таблице стилей CSS-описание:

. scElement {
POSITION…;
z-index…;
…

можно применить к нему псевдокласс «:hover» и псевдоэлемент «::before» CSS:

.scElement:hover::before {content:’prefix’; color…; background-color…;}.

Тогда при наведении курсора мышки перед словом ‘Element’ будет появляться слово ‘prefix’, в котором изменится цвет букв и фона.

Варианты содержания псевдоэлемента

Если не указывать свойства в псевдоэлементе, они останутся такими же, как у основного элемента — scElement. Можно указать url, и тогда свойство content: url(‘/scBox/rm-v/sc-rights.png’) при наведении курсора покажет картинку на элементе. В случае content: «\03B1» появится математический символ «alfa», но использовать специальные символы: « », «<», ««», «»» и прочие не следует — они отобразятся как есть.

Допускается много вариантов указания содержания псевдоэлементов: обычный «текст», url(), последовательность шестнадцатеричных символов, обозначения: open-quote/close-quote или no-open-quote/no-close-quote и др. Поскольку допускается указание абсолютной позиции содержания посредством свойств стилей, то, применяя before, CSS позволит разместить псевдоэлемент в любом месте элемента, к которому он привязан.

Можно комбинировать одновременное использование before и after. Поэтому, размещая при помощи CSS before content символы, можно получить различные эффекты, а комбинируя различные псевдоклассы и псевдоэлементы, удивить посетителя, не затратив при этом ни одного байта JavaScript-кода.

Особенности псевдоэлементов

Для их обозначения принят символ «:», как и для обозначения псевдоклассов, но в CSS3 отличие псевдоэлементов принято обозначать «::». Браузеры, понимающие это, воспринимают оба обозначения. Пробелы в записи не допускаются, строка, в которой записан псевдокласс и (или только) псевдоэлемент, записывается вместе:

scElement:hover::before { content: ‘prefix’; … }

scElement:active:after { content: ‘suffix’; … }

Важно не забывать: CSS before работает вне контента сайта. Стили не имеют отношения к содержанию страницы. Псевдоэлементы — не исключение. Они не присутствуют в дереве DOM и нежелательно их использовать в значимых участках сайта — в контент они не попадут.

Использование «:» и «::» поддерживается мобильными платформами и современными браузерами, но проверить работу на устаревших версиях часто не бывает лишним.

Содержание псевдоэлемента не включается в контент сайта. Его не увидят поисковики. Как использовать это обстоятельство — зависит от конкретной ситуации, но возможности использовать CSS before, как и after, независимо или в комплексе, интересно, когда content представляет собой url(). Прямое использование содержания псевдоэлемента, как ссылки на сайт, позволит скачать с него файл, например, картинку.

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

CSS ::before Selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Вставить текст перед содержимым каждого элемента

p::before {
content: «Читать это: «;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

Используйте свойство содержимого, чтобы указать содержимое для вставки.

Используйте селектор ::after, чтобы вставить что-то после содержимого.

Версия:	CSS2

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
::до	4,0	9,0	3,5	3. 1	7,0

Синтаксис CSS

::before {
объявления css ;
}

Дополнительные примеры

Пример

Вставить содержимое перед каждым содержимым элемента

и задать стиль для вставленного содержимого:

p::before {
content: «Читать это -«;
цвет фона: желтый;
красный цвет;
вес шрифта: полужирный;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Псевдоэлементы CSS

Справочник по селектору CSS: CSS ::after selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

CSS Генерируемый контент для псевдоэлементов

Могу ли я использовать

Поиск

Контент, сгенерированный CSS для псевдоэлементов

— РЕК

Глобальное использование
99,79% + 0,04% знак равно 99,83%

Метод отображения текста или изображений до или после содержимого данного элемента с использованием псевдоэлементов ::before и ::after. Все поддерживаемые браузеры также поддерживают нотацию attr() в свойстве content .

Chrome

4 — 106: Supported
107: Supported
01% — Supported»> 108 — 110: Supported

Edge

12 — 106: Supported
107: Supported

Safari

3.1 — 16.0: Supported
16.1: Supported
16.2 — TP: Supported

Firefox

2 — 105: Supported
106: Supported
107 — 108: Supported

Opera

9 — 90: поддержано
91: Поддержано

IE

5,5 — 7: Не поддерживается
04% — Partial support»> 8: Независимая поддержка
9 — 10: Поддержка
11: Подпоника
9 — 10: Поддержка
11: Подпоника
.0111
1. 107: Supported
Safari on iOS
1. 3.2 — 16.0: Supported
2. 16.1: Supported
Samsung Internet
1. 4 — 17.0: Supported
2. 18.0: Supported
Opera Mini
1. все: поддерживается
Opera Mobile
1. 10–12.1: поддерживается

Css before: ::before — CSS: Cascading Style Sheets

Псевдоэлемент :before | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

Before CSS — оригинально, удобно, практично

Отличительная особенность псевдоэлементов

Общие правила использования

Варианты содержания псевдоэлемента

Особенности псевдоэлементов

CSS ::before Selector

Пример

Определение и использование

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

Синтаксис CSS

Дополнительные примеры

Пример

Связанные страницы

ВЫБОР ЦВЕТА

КОД ИГРЫ

Top Tutorials

Основные примеры

CSS Генерируемый контент для псевдоэлементов

Контент, сгенерированный CSS для псевдоэлементов

Глобальное использование

Chrome

Edge

Safari

Firefox

Opera

IE

Safari on iOS

Samsung Internet

Opera Mini

Opera Mobile

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

Рубрики