CSS свойство content

Свойство content используется вместе с псевдоэлементами ::before и ::after для создания контента внутри элемента. Имеет следующие значения:

  • normal
  • none
  • counter
  • attr
  • string
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • url

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

Объекты, вставленные с помощью свойства content, являются анонимными замененными элементами.
Значение по умолчанию normal
Применяется К псевдоэлементам ::before и ::after
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.Content = "none";

Синтаксис

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::before { 
      content: "Name -";
      }
      .country::before { 
      content: normal;
      }
    </style>
  </head>
 
  <body>
    <h2>Пример свойства content</h2>
    <p>Меня зовут Джон</p>
    <p class="country">Я живу в Канаде</p>
  </body>
</html>

Пример со значением "string":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li:before{
      content:"List item";
      }
      p:after{
      content:" with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства content</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Какой-либо параграф.</p>
  </body>
</html>

Пример со значением "open-quote". Значение "open-quote" не может быть применено без "close-quote".

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::before {
      content: open-quote;
      }
      p::after {
      content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства content</h2>
    <p>Привет, меня зовут Джон.</p>
    <p>Я из Канады.</p>
  </body>
</html>

Значения

Значение Описание
normal Устанавливает нормальный контент. Значение по умолчанию
none Устанавливает пустой контент. Псевдоэлемент не генерируется.
counter Дает возможность создать счетчик.
attr Устанавливает контент в значение одного из атрибутов селектора.
string Устанавливает контент в указанный вами текст.
open-quote Устанавливает открывающую кавычку.
close-quote Устанавливает закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку из контента.
no-close-quote Удаляет закрывающую кавычку из контента.
url Добавляет медиа-контент - изображение, звук, видео. Если указанный файл не может быть отображен, значение игнорируется, или будет отображен заполнитель.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 4.0+

Практикуйте свои знания

Что можно сделать с помощью CSS свойства 'content'?
Считаете ли это полезным?