W3docs
ru
Войти

Свойство CSS content

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

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

На этой странице рассматривается, когда и как использовать content: вставка простого текста, получение значений атрибутов с помощью attr(), нумерация элементов с помощью CSS-счётчиков, встраивание изображений и кавычек, а также типичные ошибки (например, недоступность генерируемого текста для экранных дикторов).

Свойство принимает следующие значения:

  • normal
  • none
  • counter
  • attr
  • string
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • url
Информация

Текст, вставленный с помощью content, не является частью DOM — его нельзя выделить так же, как обычный текст, а поддержка вспомогательными технологиями непоследовательна. Используйте его для декоративного или дополнительного содержимого, но не для содержимого, которое должно быть доступно каждому читателю. Для того чтобы open-quote и close-quote отображали фактические кавычки, на элементе должно быть задано свойство quotes.

Начальное значениеnormal
Применяется кПсевдоэлементам ::before и ::after.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS2
DOM Синтаксисelement.style.content = "none";

Синтаксис

Синтаксис свойства CSS content

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

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

Пример свойства CSS content со значением normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: "Name -";
      }
      .country::before {
        content: normal;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>My name is John</p>
    <p class="country">I live in Canada</p>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS content

Пример свойства content со значением "string":

Пример свойства CSS content со значением string

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:before {
        content: "List item";
      }
      p:after {
        content: " with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Here is some paragraph</p>
  </body>
</html>
Попробуйте сами »

В следующем примере видно, что open-quote не может появиться без close-quote.

Пример свойства content со значением "open-quote":

Пример свойства content со значениями open-quote и close-quote

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        quotes: open-quote close-quote;
      }
      p::before {
        content: open-quote;
      }
      p::after {
        content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>Hello, my name is John</p>
    <p>I am from Canada</p>
  </body>
</html>
Попробуйте сами »

Пример свойства content со значениями "open-quote" и "no-close-quote":

Пример свойства content со значениями "open-quote" и "no-close-quote":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: open-quote;
      }
      p::after {
        content: no-close-quote;
      }
    </style>
  </head>
  <body>
    <p>Example with content property</p>
  </body>
</html>
Попробуйте сами »

Использование значения attr() для чтения атрибута

attr() помещает значение HTML-атрибута в генерируемое содержимое. Распространённый вариант использования — отображение адреса ссылки или вывод атрибута data-* в виде всплывающей метки. Значение атрибута всегда трактуется как string.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a::after {
        content: " (" attr(href) ")";
        color: #888;
      }
    </style>
  </head>
  <body>
    <p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
  </body>
</html>

Ссылка отображается как Visit W3docs (https://www.w3docs.com) to learn more. — обратите внимание, что строка и attr() объединяются простым написанием рядом.

Использование счётчиков для нумерации элементов

CSS-счётчики позволяют генерировать последовательные числа без изменения HTML. Счётчик инициализируется с помощью counter-reset, увеличивается с помощью counter-increment, а выводится функцией counter() внутри content. Это стандартный способ нумерации заголовков, шагов или рисунков.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        counter-reset: section;
      }
      h2::before {
        counter-increment: section;
        content: "Section " counter(section) ": ";
      }
    </style>
  </head>
  <body>
    <h2>Introduction</h2>
    <h2>Installation</h2>
    <h2>Usage</h2>
  </body>
</html>

Перед каждым элементом <h2> автоматически добавляется Section 1: , Section 2: и Section 3: .

Вставка изображения с помощью значения url()

Значение url() встраивает внешний ресурс — как правило, небольшую иконку — в генерируемый блок. Это хорошо подходит для декоративных маркеров, однако поскольку изображение не находится в DOM, оно не имеет альтернативного текста, поэтому избегайте его использования для значимых изображений.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .external::after {
        content: url("https://www.w3docs.com/build/img/favicon.ico");
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <p class="external">A link to an external resource</p>
  </body>
</html>
Внимание

Генерируемое содержимое по умолчанию является декоративным. Экранные дикторы могут пропускать его или читать непоследовательно в разных браузерах, а пользователи не могут его скопировать. Никогда не помещайте текст, который читатель не должен пропустить (например, цену или сообщение об ошибке), только внутри значения content.

Значения

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

Связанные свойства

Свойство content действует только на генерируемые блоки, поэтому оно почти всегда используется совместно с псевдоэлементами, которые их создают:

  • ::before — вставляет генерируемое содержимое перед собственным содержимым элемента.
  • ::after — вставляет генерируемое содержимое после собственного содержимого элемента.

Практика

Практика
Какие утверждения о свойстве CSS content верны?
Какие утверждения о свойстве CSS content верны?
Was this page helpful?