content
Поддержка браузерами
|
|
|
|
|
|
12.0+ |
8.0+ |
1.0+ |
1.0+ |
4.0+ |
1.0+ |
Описание
CSS свойство content определяет содержимое для псевдо-элементов ::before и ::after. Допускается указывать более одного значения, разделяя их пробелом.
Значение по умолчанию: |
normal |
Применяется: |
к псевдо-элементам ::before and ::after |
Анимируется: |
нет |
Наследуется: |
нет |
Версия: |
CSS2 |
Синтаксис JavaScript: |
object.style.content="url(beep.wav)" |
Синтаксис
content: значение [значение [...]];
Значения свойства
Значение |
Описание |
none |
Отменяет добавление псевдо-элемента. |
normal |
Тоже самое, что и значение none. |
counter() |
Это функция, которая выводит значение счётчика. Значение счётчика устанавливается с помощью свойств counter-reset и counter-increment. У функции может быть один или два, разделённых запятой аргумента: первый – имя счётчика, второй – тип маркера (list-style-type), например, counter(num, upper-roman). Если тип маркера не указан, то по умолчанию он имеет значение decimal. |
attr(атрибут) |
Добавляет значение указанного атрибута к контенту. |
строка |
Текстовая строка, состоящая из нуля или более символов. Строка должна быть заключена в двойные или одинарные кавычки (апострофы). В строке допускается использовать любые символы. |
open-quote |
Устанавливает открывающие кавычки. |
close-quote |
Устанавливает закрывающие кавычки. Использование невозможно без предшествующего значения open-quote. |
no-open-quote |
Удаляет открывающие кавычки из контента, установленные с помощью open-quote. |
no-close-quote |
Удаляет закрывающие кавычки из контента, установленные с помощью close-quote. |
url(url) |
Добавляет к контенту один из видов медиа файлов(изображение, звук, видео, и т.д.). |
inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p:before { content:"Прочитайте -"; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p>Я проживаю в Даксбурге.</p>
</body>
</html>
Результат данного примера в окне браузера: