Свойство CONTENT

Браузер Internet Explorer Firefox Mozilla Opera Netscape Safari
Версия 5.5 6.0 7.0 1.0 2.0 1.7 7.0 8.0 9.0 6.0 7.0 8.0 1.0
Поддержка Не поддерживается Не поддерживается Не поддерживается Част. Част. Част. Поддерживается Поддерживается Поддерживается Поддерживается Част. Поддерживается Поддерживается

Част. - поддерживается частично.

Краткая информация

CSS CSS2
Значение по умолчанию Пустая строка
Наследование Нет
Применяется К псевдоэлементам before и after
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.html#content

Описание

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

Синтаксис

Аргументы

Строка Текст, который добавляется на web-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §).
attr(атрибут) Возвращает строку, которая является значением атрибута указанного в скобках. К примеру, IMG:after{content:attr(href)} добавит после изображения его адрес, т.е. значение параметра href. Если указанного атрибута нет, то вернется пустая строка.
open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого параметра quotes.
close-quote Вставляет закрывающую кавычку, тип которой устанавливается с помощью стилевого параметра quotes.
no-open-quotes Открывающая кавычка не вставляется в то место, где она должна быть добавлена. К примеру, тег <Q> автоматически добавляет кавычки к содержащему внутри него тексту.
no-close-quote Отменяет добавление закрывающей кавычки.
url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.

Пример

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>content</title>
<style type="text/css">
SPAN.tag {
 color: navy; /* Цвет текста */
 font-family: monospace; /* Моношириный шрифт */
 quotes: "<" ">"; /* Устанавливаем вид кавычек */
}

SPAN.tag:before {
 content: open-quote; /* Добавляем перед текстом открывающую кавычку */
}

SPAN.tag:after {
 content: close-quote; /* Добавляем после текста закрывающую кавычку */
}
</style>
</head>
<body>

<p>Пример тега <span class="tag">DEL</span> используется для задания текста, который был удален в новой версии документа.</p>

</body>
</html>

Комментарий