content

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	Пустая строка
Наследуется	Нет
Применяется	К псевдоэлементам :before и :after
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.html#content

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Строка: Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы 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: Наследует значение родителя.

Пример

XHTML 1.0CSS 2.1IE 9Cr 15Op 11Sa 5.1Fx 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>content</title>
  <style type="text/css">
   .tag {
    color: navy; /* Цвет текста */
    font-family: monospace; /* Моношириный шрифт */
    quotes: "<" ">"; /* Устанавливаем вид кавычек */
   } 
   .tag:before {
    content: open-quote; /* Добавляем перед текстом открывающую кавычку */
  }
   .tag:after {
    content: close-quote; /* Добавляем после текста закрывающую кавычку */
   }
  </style>
 </head>
 <body>
  <p>Тег <span class="tag">DEL</span> используется 
  для выделения текста, который был удален в новой версии документа.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства content

Рис. 1. Применение свойства content

Браузеры

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.

Другие статьи по теме

counter-increment

Предназначено для увеличения значения счетчика приращений, который задается свойством counter-reset.

counter-reset

Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента, а также начальное значение счетчика.

Контент

Если вам понравились материалы сайта, вы можете поддержать сайт, купив справочник по CSS в формате CHM, PDF или в виде HTML-файлов за 35 р.