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

content

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

Тип свойства

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

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

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

Значения

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

  • Текст — текстовая строка заключенная в двойные или одинарные кавычки. В тексте можно использовать любые символы, в том числе и спецсимволы HTML, но только уже в «готовом» виде, а не кодовом.
  • url('адрес') — абсолютный или относительный адрес вставляемого объекта, например изображения.
  • counter(параметры) — это функция, которая выводит начальное (свойство counter-reset) или текущее (свойство counter-increment) значение счетчика. У функции может быть один или два (разделенных запятой) параметра: имя счетчика и способ нумерации. Способ нумерации имеет те же значения, что и свойство list-style-type, например, counter(schetchik, upper-latin). Если способ нумерации не указан, то он имеет значение decimal.
  • attr(атрибут) — это функция, возвращающая строку, которая является значением атрибута тега указанного в селекторе (перед псевдоэлементом). Если такого атрибута нет, то вернется пустая строка. Например, abbr:after content: { attr(title); } добавит после аббревиатуры текст из «всплывающей» подсказки.
  • open-quote — вставляет открывающую кавычку, тип которой указывается свойством quotes.
  • close-quote — вставляет закрывающую кавычку, тип которой указывается в quotes.
  • no-open-quote — отменяет вставку открывающей кавычки в том месте, где она должна присутствовать.
  • no-close-quote — отменяет вставку закрывающей кавычки.
  • none — псевдоэлемент не добавляет содержимое.
  • normal — вычисляется как none, но для псевдоэлементов :before и :after.
  • inherit — наследует значение content от родительского элемента.

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

Значение по умолчанию: 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" "https://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 не понимают значения управляющие кавычками.

CSS по алфавиту
CSS по назначению