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	Значение элемента наследуется от родительского элемента.