Добавление значения атрибута.

Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.

Некоторые значения атрибута content для , предназначенных для поисковых роботов, приведены в табл. 1.

Допустимые значения атрибута content для , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.

Табл. 2. Значения для

Значение	Допустимые значения	Описание
width	device-width или целое положительное число	Устанавливает ширину области просмотра в пикселях.
height	device-height или целое положительное число	Устанавливает высоту области просмотра в пикселях.
initial-scale	Число от 0.0 до 10.0	Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра.
maximum-scale	Число от 0.0 до 10.0	Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale , в противном случае игнорируется.
minimum-scale	Число от 0.0 до 10.0	Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale , в противном случае игнорируется.
user-scalable	yes или no	Если указано no , то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes .

Синтаксис

Значения

Строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию

Пример

Материал из Справочник Web-языков

Принимаемые значения

sContent Строка , которая устанавливает или принимает одно из значений списка разделителей, включающего одно (или более) из следующих значений.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию для этого свойства является пустая строка, то есть фактически значение отсутсвует. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Атрибут Content используется в связке с псевдоклассами :before и :after для генерирования содержимого документа.

Строки могут быть записаны в двойных (") или одинарных (") ковычках. Двойные ковычки не могут находиться внутри других двойных ковычек, кроме случаев, когда им предшествует символ обратной косой черты (\). Например, строка "\"" интерпретируется, как содержащая в себе один символ двойной ковычки.

Возможно разделение строк на несколько линий для красоты или по другим соображениям, используя обратную косую черту (\) как символ продолжения. Однако, сам символ разделения строк будет игнорироваться. Авторы могут включать разделители строк в сгенерированное содержимое, написав выходную последовательность \A в любом количестве строк после свойства content . Сгенерированный разрыв отобразится в соответствии со значением атрибута white-space .

Обратная косая черта также используется для генерирования символов перехода, которые не могут быть представлены в текущей символьной кодировке. В этом случае, обратная косая черта следует за шестью шестнадцатиричными символами (в диапазоне от 0-9 и A-F) для указания на символ с этим номером в таблице Unicode.

Для работы этого свойства необходим Internet Explorer 8.

Пример

В этом примере описывается процесс генерации фигурных скобок перед и после всех элементов H1 на странице.

CSS content генерирует содержимое, которое визуально отображается на экране монитора, не добавляясь к дереву документа DOM. Программы для чтения с экрана не имеют доступ к содержимому, созданному с использованием псевдоэлементов и не могут его прочитать, поэтому рекомендуется не использовать псевдоэлементы для вставки важного контента на страницу.

Содержимое, вставляемое с помощью свойства content , появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами::before и::after ;
— с помощью свойств counter-increment и counter-reset .

Добавление генерируемого содержимого на веб-страницу

1. Свойство content

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

IE: 9.0, не поддерживает анимацию и переходы псевдоэлементов
Firefox: 4.0
Chrome: 4.0, анимация и переходы псевдоэлементов — с 26.0
Safari:
Opera: 4.0, не поддерживает анимацию и переходы псевдоэлементов
iOS Safari: 7.1
Opera Mini: 8
Android Browser: 4.1
Chrome for Android: 44

В основе генерируемого содержимого лежат псевдоэлементы::before или::after . Псевдоэлементы создают абстракции о дереве документа помимо тех, которые определены языком документа, в данном случае — HTML. Например, HTML не предлагает механизмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют ссылаться на эту не имеющую доступа информацию. Псевдоэлементы также предоставляют дизайнерам стилей способ присвоить стиль содержимому, которого нет в исходном документе.

H1:before, h1:after { content: ""; }

Генерируемое содержимое наследует значения свойств от элемента, к которому оно прикрепляется. При этом наследуются только наследуемые свойства.

content
Значения:
normal	Значение по умолчанию, означает отсутствие добавляемого содержимого.
none	Не добавляет содержимое. Используется в случае, когда нужно удалить генерируемое содержимое для одного элемента из группы элементов (например, элементы списка), для которых уже задано это свойство.
counter()	Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset . Для прямого увеличения счёта необходимо использовать свойство counter-increment .
attr()	Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr(href);
" "	Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote	Добавляет к содержимому открывающую кавычку.
close-quote	Добавляет к содержимому закрывающую кавычку.
no-open-quote	Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote	Удаляет закрывающую кавычку.
url()	Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial
inherit

1.1. Добавление специального символа

Можно оживить текст с помощью добавления специальных символов. В качестве значения используется .

H1 { font-family: "Niconne", cursive; font-size: 50px; color: #e12527; } h1:before, h1:after { content: "\2746"; display: inline-block; font-size: 60px; color: #38afaa; -webkit-animation: my 4s infinite alternate; animation: my 4s infinite alternate; } h1:before { margin-right: 0.5em; } h1:after { margin-left: 0.5em; } @-webkit-keyframes my { 0% {color: #2e2f92;} 25% {color: #38afaa;} 50% {color: #5b59a7;} 75% {color: #f7b21c;} 100% {color: #e12527;} } @keyframes my { 0% {color: #2e2f92;} 25% {color: #38afaa;} 50% {color: #5b59a7;} 75% {color: #f7b21c;} 100% {color: #e12527;} }

1.2. Добавление текста

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

H1:before, h1:after { content: "Yay!"; font-family: "Dancing Script", cursive; color: #f7b21c; text-shadow: 1px 1px 2px grey; } h1:before { margin-right: 30px; } h1:after { margin-left: 30px; }

1.3. Добавление изображения

H1:before { content: url(https://сайт/images/left-twig.png); display: inline-block; margin-right: 10px; }

1.4. Добавление блочного содержимого

*{box-sizing:border-box;} div { position: relative; width: 680px; height: 100px; border: 1px solid #C2C9D5; margin-top: 40px; background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED) } /*Кружок*/ div:nth-child(1):before { content: ""; display: inline-block; position: absolute; left: calc(50% - 11px); left: -webkit-calc(50% - 11px); top: -11px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #AC170E; background: orangered; box-shadow: 0 2px 4px #292825; } /*Треугольник*/ div:nth-child(2):before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent hotpink transparent; position: absolute; left: calc(50% - 15px); left: -webkit-calc(50% - 15px); top: -21px; } /*Зебра*/ div:nth-child(3):before{ content: ""; display: inline-block; position: absolute; height: 10px; width: 100%; background: repeating-linear-gradient(45deg, turquoise, turquoise 10px, #D7DFED 10px, #D7DFED 20px); } /*Треугольник с обводкой*/ div:nth-child(4) { border: 3px solid #3E3A40; } div:nth-child(4):before { content: ""; display: inline-block; width: 20px; height: 20px; border: 3px solid #3E3A40; transform: rotate(135deg); position: absolute; left: calc(50% - 11px); left: -webkit-calc(50% - 11px); top: -15px; background:linear-gradient(to top right,#CDD3CD, #EEF0EE, #CDD3CD); z-index: -1; }

1.5. Добавление значения атрибута

Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.

A:after { content: attr(href); }

1.6. Добавление кавычек

С помощью значений open-quote и close-quote можно генерировать открывающие и закрывающие кавычки. Внешний вид кавычек указывается в свойстве quotes . Если оно не задано, то будут использованы значения браузера по умолчанию.

Blockquote { quotes: "\2039" "\203A"; font-size: 40px; font-family: "Sigmar One", cursive; } blockquote:before { content: open-quote; color: mediumvioletred; margin-right: 10px; } blockquote:after { content: close-quote; color: mediumvioletred; margin-left: 10px; }

1.7. Добавление счетчика элементов

Значение функции counter() позволяет пронумеровать любые блочные элементы на веб-странице. Счетчики создаются при помощи CSS-свойств counter-reset и counter-increment .

1.7.1. Имя счетчика

Свойство counter-reset задает имя одного или нескольких счетчиков, позволяя устанавливать или сбрасывать значение счетчика до любого значения. Свойство используется только в сочетании со вторым свойством — counter-increment . Работает для любых HTML-элементов.

1.7.2. Приращение счетчика

Свойство counter-increment принимает одно или несколько значений, которые определяют имена счетчиков, которые будут приращены.

counter-increment
Значения:
none	Значение по умолчанию. Отсутствие приращения для счетчика.
имя счётчика число	Имя счётчика определяет, какой счетчик будет приращен. Значение по умолчанию 1 . Если задано отрицательное число, то нумерация элементов будет отрицательная. Число задает начальное значение, а также шаг приращения, т.е. если установить counter-increment: id 2; , то первый элемент будет нумероваться с 2 , второй — с 4 и т.д. Если идентификатор ссылается на счетчик, который не был инициализирован с помощью counter-reset , то начальное значение будет равно 0 .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Значение свойства content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

Title

Title

body { counter-reset: h2;/*создаем счетчик для любого заголовка h2*/ } h2 { counter-reset: p; /*создаем счетчик для абзацев р так, чтобы в каждой группе абзацев нумерация шла от номера заголовка*/ color: #0ba7e2; } h2:before { content: "Part " counter(h2) ". "; /*добавляем в начале каждого заголовка текст с пробелом, текущее значение счетчика и снова текст (в данном случае точку и пробел)*/ counter-increment: h2; /*задаем увеличение нумерации, при каждом появлении элемента h2 счетчик будет увеличиваться на единицу*/} p { color: #3b4849; } p:before { margin-left: 30px; content: counter(h2) "." counter(p) ". ";/*добавляем в начале каждого абзаца значение счетчика h2, текст (в данном случае точка), счетчик абзацев и снова текст (точку с пробелом)*/ counter-increment: p; /*задаем увеличение нумерации на единицу*/ }

2. Свойство display: list-item

В спецификации CSS есть еще одна возможность генерации содержимого, она реализуется с использованием элементов, свойство display которых принимает значение list-item . Значение list-item свойства display превращает любые блочные элементы в элементы списка, позволяя задать для них любой вид нумерации через свойство list-style-type .

Div { display: list-item; list-style-type: decimal-leading-zero; font-weight: bold; font-size: 20px; color: #DC143C; }