Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию для этого свойства является пустая строка, то есть фактически значение отсутсвует. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Атрибут Content используется в связке с псевдоклассами :before и :after для генерирования содержимого документа.
Строки могут быть записаны в двойных (") или одинарных (") ковычках. Двойные ковычки не могут находиться внутри других двойных ковычек, кроме случаев, когда им предшествует символ обратной косой черты (\). Например, строка "\"" интерпретируется, как содержащая в себе один символ двойной ковычки.
Возможно разделение строк на несколько линий для красоты или по другим соображениям, используя обратную косую черту (\) как символ продолжения. Однако, сам символ разделения строк будет игнорироваться. Авторы могут включать разделители строк в сгенерированное содержимое, написав выходную последовательность \A в любом количестве строк после свойства content . Сгенерированный разрыв отобразится в соответствии со значением атрибута white-space .
Обратная косая черта также используется для генерирования символов перехода, которые не могут быть представлены в текущей символьной кодировке. В этом случае, обратная косая черта следует за шестью шестнадцатиричными символами (в диапазоне от 0-9 и A-F) для указания на символ с этим номером в таблице Unicode.
Для работы этого свойства необходим Internet Explorer 8.
В этом примере описывается процесс генерации фигурных скобок перед и после всех элементов H1 на странице.
Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
Некоторые значения атрибута content для , предназначенных для поисковых роботов, приведены в табл. 1.
Допустимые значения атрибута content для , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 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 . |
Строка символов, которую надо взять в одинарные или двойные кавычки.
CSS content генерирует содержимое, которое визуально отображается на экране монитора, не добавляясь к дереву документа DOM. Программы для чтения с экрана не имеют доступ к содержимому, созданному с использованием псевдоэлементов и не могут его прочитать, поэтому рекомендуется не использовать псевдоэлементы для вставки важного контента на страницу.
Содержимое, вставляемое с помощью свойства content , появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами::before и::after ;
— с помощью свойств counter-increment и counter-reset .
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 |
Можно оживить текст с помощью добавления специальных символов. В качестве значения используется .
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;} }
В качестве генерируемого содержимого между кавычками можно поместить любой текст, и он появится в указанном месте, при этом текст в кавычках выводится как есть.
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; }
H1:before { content: url(https://сайт/images/left-twig.png); display: inline-block; margin-right: 10px; }
*{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; }
Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.
A:after { content: attr(href); }
С помощью значений 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; }
Значение функции counter() позволяет пронумеровать любые блочные элементы на веб-странице. Счетчики создаются при помощи CSS-свойств counter-reset и counter-increment .
Свойство counter-reset задает имя одного или нескольких счетчиков, позволяя устанавливать или сбрасывать значение счетчика до любого значения. Свойство используется только в сочетании со вторым свойством — counter-increment . Работает для любых HTML-элементов.
Свойство counter-increment принимает одно или несколько значений, которые определяют имена счетчиков, которые будут приращены.
counter-increment | |
---|---|
Значения: | |
none | Значение по умолчанию. Отсутствие приращения для счетчика. |
имя счётчика число | Имя счётчика определяет, какой счетчик будет приращен. Значение по умолчанию 1 . Если задано отрицательное число, то нумерация элементов будет отрицательная. Число задает начальное значение, а также шаг приращения, т.е. если установить counter-increment: id 2; , то первый элемент будет нумероваться с 2 , второй — с 4 и т.д. Если идентификатор ссылается на счетчик, который не был инициализирован с помощью counter-reset , то начальное значение будет равно 0 . |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Значение свойства content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.
В спецификации 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; }