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