Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

content

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

Тип свойства

Назначение: контент.

Применяется: к псевдоэлементам :before и :after.

Наследуется: нет.

Значения

Значением свойства content могут быть ключевые слова normal, none или inherit либо один или несколько разделенных пробелом параметров определяющих добавляемое содержимое.

Процентная запись: не существует.

Значение по умолчанию: normal.

Синтаксис

content: [ текст | url('адрес') | counter(параметры) | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | none | normal | inherit

Пример CSS: использование content

<!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>seodon.ru - CSS свойство content</title>
  <style type="text/css">
   q {
    font-style: italic; /* курсив для тега Q */
   }
   q:before {
    content: no-open-quote "Цитата: "; /* убираем открывающую кавычку и добавляем текст */
    font-weight: bold; /* жирный шрифт для добавленного текста */
   	}
   q:after {
    content: no-close-quote; /* убираем закрывающую кавычку */
   }
  </style>
 </head>
 <body>
   <p><q>Здесь могла быть ваша цитата.</q></p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS content в браузере Opera.

Использование свойства CSS content

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и вышеДо 9.09.0 и выше2.03.0 и выше9.2 9.6 и выше3.1 и выше
Поддержка:НетДаЧастичноДаЧастичноДаЧастичноДаЧастично

Forefox 2.0 и Opera 9.2 не понимают значение none. Safari и Chrome до 9.0 не понимают значения управляющие кавычками.