Синтаксис
content: строка | attr(параметр) | open-quote | close-quote
| no-open-quote | no-close-quote | url | counter | normal | none | inherit
Значения
- Строка
- Текст, который добавляется на веб-страницу, строка при этом должна браться
в двойные или одинарные кавычки. Допускается использовать юникод для вставки
спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§,
а не §).
- attr(параметр)
-
Возвращает строку, которая является значением параметра тега указанного в скобках.
Например, IMG:after {content:attr(href)} добавит
после изображения его адрес, т.е. значение параметра href.
Если указанного параметра нет, то вернется пустая строка.
- open-quote
- Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого
свойства quotes.
- close-quote
- Вставляет закрывающую кавычку.
- no-open-quotes
- Отменяет добавление открывающей кавычки.
- no-close-quote
- Отменяет добавление закрывающей кавычки.
- url
- Абсолютный или относительный адрес вставляемого объекта. Если указанный
файл браузер не может отобразить, то значение игнорируется.
- counter
- Выводит значение счетчика, заданного свойством counter-reset.
- none
- Не добавляет никакое содержание.
- normal
- Задается как none для псевдоэлементов before и after.
- inherit
- Наследует значение родителя.
Пример
<!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=utf-8">
<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>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства content
|
