content

Содержание

content
Краткая информация
Синтаксис
Значения
Пример
Объектная модель
Примечание
Спецификация
Браузеры
См. также
Рецепты
content
Синтаксис
Значения
Браузеры
content¶
Демо¶
Синтаксис¶
Значения¶
Спецификации¶

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

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

Синтаксис

Значения

Строка Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §). attr(параметр)
Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after добавит после ссылки её адрес, т.е. значение атрибута href . Если указанного атрибута нет, вернется пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quotes
Отменяет добавление открывающей кавычки. no-close-quote
Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счетчика, заданного свойством counter-reset . none Не добавляет никакое содержание. normal Задается как none для псевдоэлементов :before и :after . inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Тег

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства content

Браузеры

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.

Источник

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 которые начинаются с амперсанда ( &sect ; например), будут отображаться как есть, т. е. простым текстом ( &sect ;, а не § ). 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

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

Источник