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
Спецификации¶
