content
Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами ::after и ::before, они соответственно указывают отображать новое содержимое после или до содержимого элемента, к которому добавляются.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Нет |
| Применяется | К псевдоэлементам ::before и ::after |
| Анимируется | Нет |
Синтаксис
content: | attr() | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | noneСинтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
<строка>Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т. е. простым текстом (§, а не §). attr() Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after добавит после ссылки её адрес, т. е. значение атрибута href . Если указанного атрибута нет, то вернётся пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes. close-quote Вставляет закрывающую кавычку. no-open-quote Отменяет добавление открывающей кавычки. no-close-quote Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счётчика, заданного свойством counter-reset. none Не добавляет никакого содержимого. normal Задаётся как none для псевдоэлементов ::before и ::after .
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства content
Объектная модель
Примечание
Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none . Safari до версии 3.1 не поддерживает значение none и normal .
Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11 и 5.1 соответственно.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- counter-increment
- counter-reset
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибуты ссылок
- Комплексные селекторы
- Не только текст
- Псевдоэлемент ::after
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
Рецепты
content
Свойство, с помощью которого можно добавить на страницу то, чего нет в HTML-разметке.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Когда задано свойство content , то элемент заменяется на значение этого свойства. В качестве значения могут быть переданы различные типы: изображение, градиент или текст.
Пример
Скопировать ссылку «Пример» Скопировано
a::after content: "👉"; margin-right: 5px;>a::after content: "👉"; margin-right: 5px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Изображение в качестве содержимого. Может применяться к любому элементу.
div content: url("http://www.example.com/test.png");>div content: url("http://www.example.com/test.png"); >
Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам : : before и : : after .
div::before content: "prefix";>div::before content: "prefix"; >
Значения счётчиков с использованием функций counter ( ) и counters ( ) :
div::before content: counter(chapter_counter);> div::before content: counters(section_counter, ".");>div::before content: counter(chapter_counter); > div::before content: counters(section_counter, "."); >
Значения HTML-атрибутов с использованием функции attr ( ) :
div::before content: attr(value string);>div::before content: attr(value string); >
Ключевые слова, зависящие от языка страницы и положения в тексте:
div::before content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote;>div::before content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; >
Использование нескольких значений одновременно. Исключение — ключевые слова normal и none :
div::before content: open-quote counter(chapter_counter);>div::before content: open-quote counter(chapter_counter); >
Ключевые слова, которые нельзя комбинировать с другими значениями:
div::before content: normal; content: none;>div::before content: normal; content: none; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Чаще всего свойство content применяется к псевдоэлементам : : before и : : after . В зависимости от значения свойства псевдоэлемент принимает тот или иной вид:
- Если значением является просто строка, то она подставляется на место псевдоэлемента. Как правило, это до или после текстового содержимого тега.
- Есть несколько зарезервированных слов, которые также можно указывать в качестве значения. Используются они как совместно со свойством quotes , так и в автоматическом режиме:
- open — quote обозначает открывающую кавычку цитаты для текущего языка. Например, для русского это будет открывающая «ёлочка» ( « );
- close — quote обозначает закрывающую кавычку цитаты для текущего языка. Например, для русского это будет закрывающая «ёлочка» ( » );
Вспомните, как говорили мушкетёры:Один за всех, все за одного!
blockquote> Вспомните, как говорили мушкетёры: q>Один за всех, все за одного!q> blockquote>blockquote quotes: "«" "»" "„" "”";> blockquote::before content: open-quote;> blockquote::after content: close-quote;>blockquote quotes: "«" "»" "„" "”"; > blockquote::before content: open-quote; > blockquote::after content: close-quote; >«Вспомните, как говорили мушкетёры: „Один за всех, все за одного!”»
- no — open — quote и no — close — quote используются, когда не нужно отображать кавычки, но при этом продолжать увеличивать уровень вложенности;
- Если значением является результат выполнения функций counter ( ) или counters ( ) , то псевдоэлемент будет содержать вычисленное значение счётчика в текущий момент. Эти функции работают совместно со свойствами counter — reset и counter — increment ;
- Очень интересным значением является результат выполнения функции attr ( ) .
С помощью неё можно вывести в псевдоэлемент значение любого атрибута тега:
Ваш рейтинг: 212p> Ваш рейтинг: span data-tip="Вычисляется на основе активности">212span> p>[data-tip] position: relative; cursor: help;> [data-tip]:hover::after opacity: 1; visibility: visible;> [data-tip]::after content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden;>[data-tip] position: relative; cursor: help; > [data-tip]:hover::after opacity: 1; visibility: visible; > [data-tip]::after content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; >
🛠 . или красиво оформить нумерованный перечень
.benefits counter-reset: benefits;> .benefits-item counter-increment: benefits;> .benefits-item::before content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7;>.benefits counter-reset: benefits; > .benefits-item counter-increment: benefits; > .benefits-item::before content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7; >content¶
Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
Применяется совместно с псевдоэлементами ::after и ::before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
/* Keywords that cannot be combined with other values */ content: normal; content: none; /* values */ content: url('http://www.example.com/test.png'); content: linear-gradient(#e66465, #9198e5); content: image-set('image1x.png' 1x, 'image2x.png' 2x); /* alt text for generated content, added in the Level 3 specification */ content: url('http://www.example.com/test.png') / 'This is the alt text'; /* value */ content: 'prefix'; /* list of content values */ content: 'prefix' url('http://www.example.com/test.png'); content: 'prefix' url('http://www.example.com/test.png') 'suffix' / 'This is some alt text'; /* values, optionally with */ content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, '.'); content: counters( section_counter, '.', decimal-leading-zero ); /* attr() value linked to the HTML attribute value */ content: attr(value string); /* Language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* Except for normal and none, several values can be used simultaneously */ content: open-quote counter(chapter_counter); /* Global values */ content: inherit; content: initial; content: revert; content: revert-layer; content: unset;Значения¶
<строка>Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда ( § ; например), будут отображаться как есть, т. е. простым текстом ( § ;, а не § ). attr() Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after добавит после ссылки её адрес, т. е. значение атрибута href . Если указанного атрибута нет, то вернётся пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quote Отменяет добавление открывающей кавычки. no-close-quote Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счётчика, заданного свойством counter-reset . none Не добавляет никакого содержимого. normal Задаётся как none для псевдоэлементов ::before и ::after .
Применяется к псевдоэлементам ::before и ::after
Спецификации¶
