Что такое content css

content

Свойство CSS content заменяет элемент сгенерированным значением. Объекты, вставленные с использованием свойства content являются анонимными заменяемыми элементами .

/ * Ключевые слова, которые нельзя комбинировать с другими значениями * / content: normal; content: none; / * значения * / content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); content: image-set("image1x.png" 1x, "image2x.png" 2x); / * альтернативный текст для сгенерированного контента, добавленный в спецификации уровня 3 * / content: url("http://www.example.com/test.png") / "This is the alt text"; / * значение * / content: "prefix"; / * значения , необязательно с * / content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, "."); content: counters(section_counter, ".", decimal-leading-zero); / * значение attr () связано со значением атрибута HTML * / content: attr(value string); / * Ключевые слова, зависящие от языка и позиции * / content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; / * За исключением normal и none, можно использовать несколько значений одновременно * / content: open-quote counter(chapter_counter); / * Глобальные значения * / content: inherit; content: initial; content: revert; content: revert-layer; content: unset;

Syntax

Values

При применении к псевдоэлементу псевдоэлемент не создается.Если применяется к элементу,значение не имеет эффекта.

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

Задает «замещающий текст» для элемента. Это значение может быть любым количеством текстовых символов. \000A9 символы должны кодироваться с использованием их управляющих последовательностей Unicode: например, \ 000A9 представляет собой символ авторского права.

Значение счетчика CSS , обычно число, полученное в результате вычислений, определяемых свойствами и .Его можно отобразить с помощью функции counter() или counters() .

Функция counter() имеет две формы: «счетчик ( имя )» или «счетчик ( имя , стиль)». Сгенерированный текст является значением самого внутреннего счетчика данного имени в области видимости данного псевдоэлемента. Он отформатирован в указанном ( по умолчанию decimal

Функция counters() также имеет две формы: «счетчики ( имя , строка )» или «счетчики ( имя , строка , стиль )». Сгенерированный текст представляет собой значение всех счетчиков с заданным именем в области действия данного псевдоэлемента, от самого внешнего до самого внутреннего, разделенных указанной строкой. Счетчики отображаются в указанном ( decimal по умолчанию).

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

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

Вводит не содержание,а увеличение (декретизацию)уровня вложенности котировок.

Accessibility concerns

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

Formal definition

Initial value	normal
Applies to	Все элементы,древовидные псевдоэлементы и поля полей страницы
Inherited	no
Computed value	На элементах всегда вычисляется как normal . On ::before и ::after , если указано значение normal , вычисляет значение none . В противном случае для значений URI — абсолютный URI; для значений attr() полученная строка; для других ключевых слов, как указано.
Animation type	discrete

Formal syntax

content = normal | none | [ content-replacement> | content-list> ] [ / [ string> | counter> ]+ ]? | element( ) content-replacement> = image> content-list> = [ string> | contents | image> | counter> | quote> | target> | ]+ counter> = | image> = url> | gradient> quote> = open-quote | close-quote | no-open-quote | no-close-quote target> = | |  = leader( leader-type> ) = counter( counter-name> , counter-style>? ) = counters( counter-name> , string> , counter-style>? ) = target-counter( [ string> | url> ] , custom-ident> , counter-style>? ) = target-counters( [ string> | url> ] , custom-ident> , string> , counter-style>? ) = target-text( [ string> | url> ] , [ content | before | after | first-letter ]? ) leader-type> = dotted | solid | space | string> counter-style> = counter-style-name> |  = symbols( symbols-type>? [ string> | image> ]+ ) symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed

Examples

Заголовки и цитаты

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

HTML

h1>5 h1> 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>6 h1> 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 "; / * Конечный пробел создает разделение между добавленным контентом и остальным контентом * / >

Result

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

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

HTML

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

CSS

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

Result

Targeting classes

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

HTML

h2>Paperback Best Sellers h2> ol> li>Political Thriller li> li class="new-entry">Halloween Stories li> li>My Biography li> li class="new-entry">Vampire Romance li> ol> 

CSS

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

Result

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

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

HTML

ul> li>a id="moz" href="https://www.mozilla.org/"> Mozilla Home Page a> li> li>a id="mdn" href="https://developer.mozilla.org/"> Mozilla Developer Network a> 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; >

Result

Element replacement

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

HTML

CSS

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

Result

Specifications

Источник

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

Рецепты

Источник