content

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

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

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

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

Описание

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

Синтаксис

content: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }

Аргументы

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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

Рис. 1. Применение параметра content

Примечание

Браузер Опера начиная с седьмой версии, не требует использования псевдоэлементов before и after и допускает применение content ко всем элементам.