English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

CSS @правила (RULES)

Полный список CSS свойств

Метод использования и примеры CSS свойства content

CSS свойство content и ::before и ::afterвКомбинируйте, чтобы создать содержимое элемента.

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

Значение по умолчанию:Описание
Применяется к:::before и ::after в
Ингерит:Нет
Анимируемо:Нет.См. также Анимационные свойства.
Версия:CSS 2, 3
JavaScript грамматика:object.style.content="counter"

Грамматика использования content

Грамматика этого атрибута такая:

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

Ниже приведен пример того, как использовать атрибут content.

　　h1::before {
　　　content:　"Chapter:　";
　　　content: "Chapter: ";
　　display: inline;
}

Эта функция вставляет значение указанного свойства перед или после выбранного элемента. Если тема выборщика не имеет указанного свойства, вставляется пустая строка.Проверьте, как будет выглядеть‹/› display

CSS свойство контролирует, будет ли содержимое, генерируемое с помощью свойства content,放在 блочном контейнере или инлайн контейнере.

Значение свойства

Таблица ниже описывает значения этого свойства.Значение
Описаниеnormal для :before и :afterpseudo-элемент
Он не учитывает никакие значения. Это значение по умолчанию.noneвpseudo-элемент
не создает.countercounter-resetЭтот параметр устанавливает content как счетчик. Дополнительную информацию см. вcounter-incrementи
свойство.строка
Вставить указанную строку (текстовый контент).url(attributeurl
значение url() указывает на внешние ресурсы (например, изображения). Если ресурс или изображение не может быть отображено, его можно пропустить или отобразить некоторые占ачные символы.attr(attribute

)

Эта функция вставляет значение указанного свойства перед или после выбранного элемента. Если тема выборщика не имеет указанного свойства, вставляется пустая строка. 　 Внимание:

Имя свойства не должно быть заключено в кавычки.open-quote
Вставить левую кавычку. Эти значения будут заменены соответствующими строками в свойстве quotes.close-quote
Вставить правую кавычку. Эти значения будут заменены соответствующими строками в свойстве quotes.no-open-quote
Не отображать начальную кавычку, а увеличить (уменьшить) уровень вложенности кавычек.no-close-quote
Не отображать правую кавычку, а увеличить (уменьшить) уровень вложенности кавычек.initial
Установить этот параметр в его значение по умолчанию.inherit

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

Совместимость браузеров

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

  • Firefox 1+

  • Google Chrome 1+

  • Internet Explorer 8+

  • Apple Safari 1+

Opera 4+ Предупреждение:Поддерживается только в случае указания действительного значения.

Для дальнейшего чтения

См. также следующие руководства:CSS условные элементы.

См. также следующие свойства:counter-reset,counter-increment.

CSS attribute counter-incrementCSS3 attribute columns