CSS свойство `content`

Определение и применение

CSS свойство content используется с псевдоэлементами :before и :after для вставки сгенерированного контента.

Попробуйте значения content

Меняется содержимое ::before. attr берёт подпись из data-label; none убирает псевдоэлемент. Текст самого элемента остаётся прежним.

Значение свойстваcontent: "До: ";content: "★ ";content: attr(data-label);content: none;

content: "До: "

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target" data-label="Метка: ">Основной текст</div>
</div>

CSS

.stage {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  background: #edf2f5;
  font: 18px/1.5 system-ui;
  padding: 12px;
  border: 2px dashed #607589;
}
.demo-target {
  padding: 12px;
  color: #b53625;
  background: #ffe4bd;
  border: 3px solid #245a85;
}
.demo-target::before {
  content: "До: ";
}

CSS

.stage {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  background: #edf2f5;
  font: 18px/1.5 system-ui;
  padding: 12px;
  border: 2px dashed #607589;
}
.demo-target {
  padding: 12px;
  color: #b53625;
  background: #ffe4bd;
  border: 3px solid #245a85;
}
.demo-target::before {
  content: "★ ";
}

CSS

.stage {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  background: #edf2f5;
  font: 18px/1.5 system-ui;
  padding: 12px;
  border: 2px dashed #607589;
}
.demo-target {
  padding: 12px;
  color: #b53625;
  background: #ffe4bd;
  border: 3px solid #245a85;
}
.demo-target::before {
  content: attr(data-label);
}

CSS

.stage {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  background: #edf2f5;
  font: 18px/1.5 system-ui;
  padding: 12px;
  border: 2px dashed #607589;
}
.demo-target {
  padding: 12px;
  color: #b53625;
  background: #ffe4bd;
  border: 3px solid #245a85;
}
.demo-target::before {
  content: none;
}

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

Спецификация: CSS content

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.content
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`content`	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Alternative text after /	✓77	✓79	✓128	✓64	✓17.4	✓77	✓128	✓55	✓17.4	✓12.0	✓77	✓17.4
`counters`	✓preview	◐140	×	◐124	×	◐140	×	◐92	×	◐30.0	◐140	×
`close-quote`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Element replacement	✓28	✓79	✓63	✓7	✓9	✓28	✓63	✓10.1	✓9	✓1.5	✓4.4	✓9
`gradient`	✓26	✓12	◐113	✓15	✓7	✓26	◐113	✓14	✓7	✓1.5	✓4.4	✓7
`image-set`	✓113	✓113	✓89	✓99	✓17	✓113	✓89	✓76	✓17	✓23.0	✓113	✓17
`no-close-quote`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`no-open-quote`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`none`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`normal`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`open-quote`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`url`	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
Ещё 8 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

content: normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?;

/* Глобальные значения */
content: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ? — необязательная часть; + — одно или несколько повторений; / — буквальный разделитель.

JavaScript синтаксис:

JavaScript

element.style.content = '"Подпись"';

Начальное значение свойства

normal.

Значения свойства

Значения content
Значение	Описание
`normal`	Отсутствие контента (устанавливается как `none` для псевдоэлементов :before и :after). Начальное значение.
`none`	Отсутствие контента.
`counter`	Устанавливает контент в качестве счетчика (добавляет значение определённого счетчика). Используется совместно со свойствами `counter-reset` и `counter-increment`
`attr(attribute)`	Выводит значение атрибута исходного элемента. Например, `a::after { content: " (" attr(href) ")"; }` добавляет адрес в скобках после текста ссылки; HTML ссылки не изменяется.
`string`	Текстовая строка. Содержимое строки обязательно заключается в кавычки.
`open-quote`	Устанавливает открывающиеся кавычки. Вид кавычек может быть изменён свойством `quotes`.
`close-quote`	Устанавливает закрывающиеся кавычки. Вид кавычек может быть изменён свойством `quotes`.
`no-open-quote`	Не выводит знак кавычки, но увеличивает глубину вложенности цитат. Уже выведенные кавычки не удаляет.
`no-close-quote`	Не выводит знак кавычки, но уменьшает глубину вложенности цитат. Уже выведенные кавычки не удаляет.
`url(url)`	Вставляет изображение, например `url("icon.svg")`. Это не способ воспроизведения аудио или видео; для них нужны HTML-элементы.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `content` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Сгенерированное содержимое

Псевдоэлемент не становится узлом DOM. Существенный текст и подписи элементов управления размещайте в HTML. Значение content: "" создаёт пустой псевдоэлемент, который можно оформить, а none не создаёт ::before или ::after. Присваивание element.style.content относится к самому элементу, а не к его псевдоэлементу: для последнего задайте CSS-правило.

Значения no-open-quote и no-close-quote управляют глубиной вложенности, не удаляя предыдущие знаки: сравните внешнюю и внутреннюю цитаты.

Спецификация

CSS Generated Content — спецификация content.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

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

Измените символ в content у li::before. Маркер создаётся CSS и отсутствует в тексте HTML; список сохраняет свою HTML-структуру.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

li:before {
    padding-right: 10px;
    color: red;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Пример CSS свойства content</title>
  </head>
  <body>
    <ul>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
  </body>
</html>

style.css

CSS

ul {
    list-style: none;
}
li:before {
    content: '•';
}

Автоматическая нумерация

Замените counter-increment: chapter на chapter 2: номера в content будут увеличиваться на два. Измените текст вокруг counter(chapter).

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Автоматическая нумерация</title>
  </head>
  <body>
    <div class="chapters">
      <h3 class="sample">Введение</h3>
      <h3 class="sample">Разметка</h3>
      <h3 class="sample">Стили</h3>
    </div>
  </body>
</html>

style.css

CSS

.chapters {
    counter-reset: chapter;
}
.sample::before {
    counter-increment: chapter;
    content: counter(chapter) '. ';
}

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

Замените attr(title) на attr(href): после текста ссылки появится адрес вместо значения title. Чтобы добавить пробел или скобки, включите их в строковые части content.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Пример CSS свойства content</title>
  </head>
  <body>
    <a href="http://www.basicweb.ru" title="Basicweb.ru"></a>
  </body>
</html>

style.css

CSS

a:after {
    content: '' attr(title) '';
}

Внешние и вложенные кавычки

Измените пары в quotes. Затем замените content: open-quote на none: начальная кавычка и увеличение уровня вложенности исчезнут.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Внешние и вложенные кавычки</title>
  </head>
  <body>
    <p class="sample">
      <q>Цитата с <q>вложенной цитатой</q> внутри</q>
    </p>
  </body>
</html>

style.css

CSS

.sample {
    quotes: '«' '»' '‹' '›';
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}

Невидимая кавычка меняет вложенность

В B внешняя цитата не рисует кавычки, но no-open-quote и no-close-quote учитывают её уровень: внутренняя цитата использует вторую пару. Замените оба значения на none — внутренняя цитата перейдёт к первой паре.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Невидимая кавычка меняет вложенность</title>
  </head>
  <body>
    <p>
      A: <q>Внешняя цитата с <q>внутренней</q></q>
    </p>
    <p>
      B: <q class="silent">Внешняя цитата с <q>внутренней</q></q>
    </p>
  </body>
</html>

style.css

CSS

body {
    quotes: '«' '»' '„' '“';
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}
.silent::before {
    content: no-open-quote;
}
.silent::after {
    content: no-close-quote;
}

CSS свойство content

Определение и применение

Попробуйте значения content

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

Начальное значение свойства

Значения свойства

Сгенерированное содержимое

Спецификация

Наследуется

Анимируемое

Примеры, попробуйте сами

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

Автоматическая нумерация

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

Внешние и вложенные кавычки

Невидимая кавычка меняет вложенность

CSS свойство `content`