Content что означает css

content

Вычисляется none для псевдоэлементов ::before и ::after .

Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.

URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.

(en-US), указанный типом данных () или (en-US), или частью веб-страницы, определяемой функцией element() (en-US), указывающей содержимое для обозначения.

Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций counter() (en-US) или counters() (en-US).Функция counter() имеет две формы записи: ‘counter(имя)’ или ‘counter(имя, стиль)’. Сгенерированный текст — это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal ).Функция counters() также имеет две формы записи: ‘counters(name, string)’ или ‘counters(name, string, style)’. Сгенерированный текст — это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal ).

Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.

Эти значения заменяются соответствующей строкой из свойства quotes (en-US).

Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.

Синтаксис

content =
normal | (en-US)
none | (en-US)
[ (en-US) | (en-US) ] (en-US) [ (en-US) / [ (en-US) (en-US) | (en-US) ] (en-US) + (en-US) ] (en-US) ? (en-US) | (en-US)
element( )

=

=
[ (en-US) (en-US) | (en-US) contents | (en-US) | (en-US) | (en-US) | (en-US) | (en-US) ] (en-US) + (en-US)

=
| (en-US)

=
| (en-US)
(en-US)

=
open-quote | (en-US)
close-quote | (en-US)
no-open-quote | (en-US)
no-close-quote

=
| (en-US)
| (en-US)

=
leader( )

=
counter( , ? (en-US) )

=
counters( , (en-US) , ? (en-US) )

=
url( (en-US) * (en-US) ) | (en-US)
src( (en-US) * (en-US) )

=
target-counter( [ (en-US) (en-US) | (en-US) ] (en-US) , , ? (en-US) )

=
target-counters( [ (en-US) (en-US) | (en-US) ] (en-US) , , (en-US) , ? (en-US) )

=
target-text( [ (en-US) (en-US) | (en-US) ] (en-US) , [ (en-US) content | (en-US) before | (en-US) after | (en-US) first-letter ] (en-US) ? (en-US) )

=
dotted | (en-US)
solid | (en-US)
space | (en-US)
(en-US)

=
| (en-US)

=
symbols( ? (en-US) [ (en-US) (en-US) | (en-US) ] (en-US) + (en-US) )

=
cyclic | (en-US)
numeric | (en-US)
alphabetic | (en-US)
symbolic | (en-US)
fixed

Примеры

Заголовки и двойные кавычки

В этом примере вставляются кавычки вокруг кавычек а добавляет слово «Глава» перед заголовками.

HTML

h1>5h1> p>According to Sir Tim Berners-Lee, q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. p> h1>6h1> p>According to the Mozilla Manifesto, q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals must have the ability to shape the Internet and their own experiences on the Internet.q> Therefore, we can infer that contributing to the open web can protect our own individual experiences on it. p> 

CSS

q  color: blue; > q::before  content: open-quote; > q::after  content: close-quote; > h1::before  content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ > 

Результат

Изображение в сочетании с текстом

В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.

HTML

a href="http://www.mozilla.org/en-US/">Mozilla Home Pagea> 

CSS

a::before  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; font: x-small Arial, sans-serif; color: gray; > 

Результат

Целевые классы

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

HTML

h2>Paperback Best Sellersh2> ol> li>Political Thrillerli> li class="new-entry">Halloween Storiesli> li>My Biographyli> li class="new-entry">Vampire Romanceli> ol> 

CSS

.new-entry::after  content: " New!"; /* Начальный пробел создаёт разделение между добавленным контентом и остальным контентом */ color: red; > 

Результат

Атрибуты изображений и элементов

В этом примере вставляется изображение перед каждой ссылкой и добавляет id атрибут после.

HTML

ul> li>a id="moz" href="http://www.mozilla.org/"> Mozilla Home Pagea>li> li>a id="mdn" href="https://developer.mozilla.org/"> Mozilla Developer Networka>li> ul> 

CSS

a  text-decoration: none; border-bottom: 3px dotted navy; > a::after  content: " (" attr(id) ")"; > #moz::before  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ; > #mdn::before  content: url("mdn-favicon16.png") ; > li  margin: 1em; > 

Результат

Замена элемента

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

HTML

CSS

#replaced  content: url("mdn.svg"); > #replaced::after  /* не будет отображаться, если замена элемента поддерживается */ content: " (" attr(id) ")"; > 

Результат

Проблемы доступности

Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.

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

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

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 ( ) .

  С помощью неё можно вывести в псевдоэлемент значение любого атрибута тега:

     Ваш рейтинг: 212  p> Ваш рейтинг: 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; >    Скопировать Скопировано Не удалось скопировать   

  Источник