Пример
Следующий пример вставляет URL в скобках после каждой ссылки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
a:after { content: " (" attr(href) ")"; }
</style>
</head>
<body>
<p><a href="http://www.Xhtml.co.il">Xhtml.co.il</a> содержит бесплатные учебники и справочники.</p>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство content если указан !DOCTYPE.</p>
</body>
</html>
Определение и использование
Свойство content используется вместе с псевдо-элементами :before и :after, для того, чтобы внести сгенерированное содержание.
| Значение по умолчанию: | normal |
|---|---|
| Унаследованный: | да |
| Версия: | CSS2 |
| Синтакс JavaScript: | object.style.content="url(beep.wav)" |
Поддержка браузеров
Свойство content поддерживается во всех ведущих браузерах.
Примечание: Internet Explorer 8 (и выше) поддерживает свойство content если указан !DOCTYPE.
Значения свойства
| Значение | Описание | Пример |
|---|---|---|
| none | Устанавливает содержание, если указано, в пустое | Смотрите пример » |
| normal | Устанавливает содержание, если указано, в нормальное, которое по умолчанию является "none" (которое пустое) | Смотрите пример » |
| counter | Устанавливает содержание счетчика | Смотрите пример » |
| attr(attribute) | Устанавливает содержание как один из атрибутов селектора | Смотрите пример » |
| string | Устанавливает содержание текста, которое вы укажете | Смотрите пример » |
| open-quote | Устанавливает содержимое для открытия цитатой | Смотрите пример » |
| close-quote | Устанавливает содержимое для закрытия цитатой | Смотрите пример » |
| no-open-quote | Удаляет открытие цитаты из содержания, если оно указано | Смотрите пример » |
| no-close-quote | Удаляет закрытие цитаты из содержания, если оно указано | Смотрите пример » |
| url(url) | Устанавливает содержание как тип медиа (изображение, звук, видео и т.д.) | Смотрите пример » |
| inherit | Указывает, что значение свойства content должно быть унаследовано от родительского элемента |
Еще примеры
Пример 2
Устанавливает содержание, если указано, в пустое:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:"Прочтите это - "; }
p#hometown:before { content:none; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p id="hometown">Я живу в Дакбурге</p>
<b>Note:</b> Для того, чтобы :before работал в IE, необходимо указать DOCTYPE.
</body>
</html>
Пример 3
Устанавливает содержание, если указано, в нормальное, которое по умолчанию является "none" (которое пустое):<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:"Прочтите это - "; }
p#hometown:before { content:normal; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p id="hometown">Я живу в Дакбурге</p>
<b>Примечание:</b> Для того, чтобы :before работал в IE, необходимо указать DOCTYPE.
</body>
</html>
Пример 4
Устанавливает содержание счетчика:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p { counter-increment: myIndex; }
p:before { content:counter(myIndex);}
</style>
</head>
<body>
<p>В начале укажите переменную (myIndex) и увеличивайте ее каждый раз когда появляется элемент p.</p>
<p>Затем вставьте счетчик перед всеми элементами р</p>
<p><b>Примечание:</b> Для того, чтобы свойство counter работало в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 5
Устанавливает содержание как один из атрибутов селектора:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
a:before { content:attr(href); }
</style>
</head>
<body>
<a href="http://www.Xhtml.co.il">(Xhtml.co.il)</a>
<p>Свойство attr() вставляет указаное в атрибуте значение до или после выбранного элемента(ов).</p>
<p><b>Примечание:</b> Для того, чтобы свойство attr работало в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 6
Устанавливает содержание текста, которое вы укажете:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:"Прочтите это - "; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p>Я живу в Дакбурге</p>
<b>Примечание:</b> Для того, чтобы content работал в IE, необходимо указать DOCTYPE.
</body>
</html>
Пример 7
Устанавливает содержимое для открытия цитатой:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:open-quote; }
p:after { content:close-quote; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p>Я живу в Дакбурге</p>
<p><b>Примечание:</b> Вы не можете иметь "close-quote" без "open-quote".</p>
<p><b>Примечание:</b> Для того, чтобы свойство content работало в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 8
Удаляет открытие цитаты из содержания, если оно указано:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:open-quote; }
p:after { content:close-quote; }
p.hometown:before { content:no-open-quote; }
p.hometown:after { content:no-close-quote; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p class="hometown">Я живу в Дакбурге</p>
<p><b>Примечание:</b>На этой странице, элементы p имеют кавычки, но элементы p с class="hometown" не имеют.</p>
<p><b>Примечание:</b> Вы не можете иметь "close-quote" без "open-quote".</p>
<p><b>Примечание:</b> Для того, чтобы content работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 9
Устанавливает содержание как тип медиа (изображение, звук, видео и т.д.):<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:before { content:url('/tryit/css/img/smiley.jpg'); }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p>Я живу в Дакбурге</p>
<p><b>Примечание:</b> Для того, чтобы свойство content работало в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Была ли эта информация полезной?
