/ ↲
    Расширенный поиск

    CSS

    content

    Свойство, с помощью которого можно добавить на страницу то, чего нет в HTML-разметке.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

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

    Пример

    Скопировано
            
          
          a::after {  content: "👉";  margin-right: 5px;}
          a::after {
  content: "👉";
  margin-right: 5px;
}

    Как пишется

    Скопировано

    Изображение в качестве содержимого. Может применяться к любому элементу.

            
          
          div {  content: url("http://www.example.com/test.png");}
          div {
  content: url("http://www.example.com/test.png");
}

    Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам ::before и ::after.

    Строка текста:

            
          
          div::before {  content: "prefix";}
          div::before {
  content: "prefix";
}

    Значения счётчиков с использованием функций counter() и counters():

            
          
          div::before {  content: counter(chapter_counter);}div::before {  content: counters(section_counter, ".");}
          div::before {
  content: counter(chapter_counter);
}

div::before {
  content: counters(section_counter, ".");
}

    Значения HTML-атрибутов с использованием функции attr():

            
          
          div::before {  content: attr(value string);}
          div::before {
  content: attr(value string);
}

    Ключевые слова, зависящие от языка страницы и положения в тексте:

            
          
          div::before {  content: open-quote;  content: close-quote;  content: no-open-quote;  content: no-close-quote;}
          div::before {
  content: open-quote;
  content: close-quote;
  content: no-open-quote;
  content: no-close-quote;
}

    Использование нескольких значений одновременно. Исключение — ключевые слова normal и none:

            
          
          div::before {  content: open-quote counter(chapter_counter);}
          div::before {
  content: open-quote counter(chapter_counter);
}

    Ключевые слова, которые нельзя комбинировать с другими значениями:

            
          
          div::before {  content: normal;  content: none;}
          div::before {
  content: normal;
  content: none;
}

    Как понять

    Скопировано

    Чаще всего свойство content применяется к псевдоэлементам ::before и ::after. В зависимости от значения свойства псевдоэлемент принимает тот или иной вид:

    • Если значением является просто строка, то она подставляется на место псевдоэлемента. Как правило, это до или после текстового содержимого тега.

    • Есть несколько зарезервированных слов, которые также можно указывать в качестве значения. Используются они как совместно со свойством quotes, так и в автоматическом режиме:

      • open-quote обозначает открывающую кавычку цитаты для текущего языка. Например, для русского это будет открывающая «ёлочка» («);
      • close-quote обозначает закрывающую кавычку цитаты для текущего языка. Например, для русского это будет закрывающая «ёлочка» (»);
            
          
          <blockquote>  Вспомните, как говорили мушкетёры: <q>Один за всех, все за одного!</q></blockquote>
          <blockquote>
  Вспомните, как говорили мушкетёры: <q>Один за всех, все за одного!</q>
</blockquote>

        
        
          
        
      
            
          
          blockquote {  quotes: "«" "»" "„" "”";}blockquote::before {  content: open-quote;}blockquote::after {  content: close-quote;}
          blockquote {
  quotes: "«" "»" "„" "”";
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

    Результат

    «Вспомните, как говорили мушкетёры: „Один за всех, все за одного!”»
    • no-open-quote и no-close-quote используются, когда не нужно отображать кавычки, но при этом продолжать увеличивать уровень вложенности;
    • Если значением является результат выполнения функций counter() или counters(), то псевдоэлемент будет содержать вычисленное значение счётчика в текущий момент. Эти функции работают совместно со свойствами counter-reset и counter-increment;
    • Очень интересным значением является результат выполнения функции attr().

    С помощью неё можно вывести в псевдоэлемент значение любого атрибута тега:

            
          
          <p>  Ваш рейтинг: <span data-tip="Вычисляется на основе активности">212</span></p>
          <p>
  Ваш рейтинг: <span data-tip="Вычисляется на основе активности">212</span>
</p>

        
        
          
        
      
            
          
          [data-tip] {  position: relative;  cursor: help;}[data-tip]:hover::after {  opacity: 1;  visibility: visible;}[data-tip]::after {  content: attr(data-tip);  position: absolute;  top: 140%;  left: 50%;  transform: translateX(-50%);  opacity: 0;  visibility: hidden;}
          [data-tip] {
  position: relative;
  cursor: help;
}

[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
    Открыть демо в новой вкладке

    Ну и конечно же разработчики спецификации позаботились о нас и сделали возможность собрать сразу несколько значений в общую строку:

            
          
          <p>Вы можете пройти <a href="https://google.com">по ссылке</a></p>
          <p>Вы можете пройти <a href="https://google.com">по ссылке</a></p>

        
        
          
        
      
            
          
          @media print {  a[href]::after {    content: " [" attr(href) "] ";  }}
          @media print {
  a[href]::after {
    content: " [" attr(href) "] ";
  }
}

    В результате так выведется на печать:

    Вывод ссылки на печать
    • Значением свойства content может быть ссылка url(...) на изображение. В этом случае содержимое элемента заменяется на это изображение. Нужно помнить о том, что при таком способе мы не можем управлять размером изображения.
            
          
          <div class="replaced" data-alt="Mozilla logo">Mozilla</div>
          <div class="replaced" data-alt="Mozilla logo">Mozilla</div>

        
        
          
        
      
            
          
          .replaced {  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");}#replaced::after {  /* не будет отображаться, если замена элемента поддерживается */  content: " (" attr(data-alt) ")";}
          .replaced {
  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
}

#replaced::after {
  /* не будет отображаться, если замена элемента поддерживается */
  content: " (" attr(data-alt) ")";
}

    Результат

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

    Подсказки

    Скопировано

    💡 Если мы используем url() в качестве значения свойства content для тега, то псевдоэлементов у такого тега не будет.

    На практике

    Скопировано

    Денис Ежков советует

    Скопировано

    🛠 Свойство content со значением counter() активно применяется в случаях, когда нужно расставить автоматическую нумерацию элементов, не относящихся к спискам:

            
          
          <section>  <h2>Внутренний механизм</h2>  <p>Механизм счётчика состоит из:</p>  <ul>    <li>кнопки;</li>    <li>пронумерованных кругов;</li>    <li>колеса прокрутки;</li>  </ul></section><section>  <h2>Принцип действия</h2>  <p>Принцип действия..</p></section><section>  <h2>См. также</h2>  <ul>    <li>Механический счётчик</li>    <li>Электронный счётчик импульсов</li>  </ul></section>
          <section>
  <h2>Внутренний механизм</h2>
  <p>Механизм счётчика состоит из:</p>
  <ul>
    <li>кнопки;</li>
    <li>пронумерованных кругов;</li>
    <li>колеса прокрутки;</li>
  </ul>
</section>

<section>
  <h2>Принцип действия</h2>
  <p>Принцип действия..</p>
</section>

<section>
  <h2>См. также</h2>
  <ul>
    <li>Механический счётчик</li>
    <li>Электронный счётчик импульсов</li>
  </ul>
</section>

        
        
          
        
      
            
          
          body {  counter-reset: cnt;}section {  counter-increment: cnt;  position: relative;}section h2::before {  content: counter(cnt);  position: absolute;  left: -45px;  top: -2px;}
          body {
  counter-reset: cnt;
}

section {
  counter-increment: cnt;
  position: relative;
}

section h2::before {
  content: counter(cnt);
  position: absolute;
  left: -45px;
  top: -2px;
}
    Открыть демо в новой вкладке

    🛠 ...или красиво оформить нумерованный перечень

            
          
          <h2>Наши преимущества:</h2><ul class="benefits">  <li class="benefits-item">Низкие цены</li>  <li class="benefits-item">Большая база поставщиков</li>  <li class="benefits-item">Быстрая доставка</li></ul>
          <h2>Наши преимущества:</h2>
<ul class="benefits">
  <li class="benefits-item">Низкие цены</li>
  <li class="benefits-item">Большая база поставщиков</li>
  <li class="benefits-item">Быстрая доставка</li>
</ul>

        
        
          
        
      
            
          
          .benefits {  counter-reset: benefits;}.benefits-item {  counter-increment: benefits;}.benefits-item::before {  content: counter(benefits);  position: absolute;  font-size: 190px;  font-weight: bold;  left: 0;  top: -0.35em;  opacity: 0.5;  color: #1A5AD7;}
          .benefits {
  counter-reset: benefits;
}

.benefits-item {
  counter-increment: benefits;
}

.benefits-item::before {
  content: counter(benefits);
  position: absolute;
  font-size: 190px;
  font-weight: bold;
  left: 0;
  top: -0.35em;
  opacity: 0.5;
  color: #1A5AD7;
}
    Открыть демо в новой вкладке

    Татьяна Фокина советует

    Скопировано

    🛠 Можете задавать альтернативные описания графике из content, когда добавляете её псевдоэлементом ::before или ::after. Перечислите описание после основного значения через косую черту (/). Видимый текст не изменится, а вот вспомогательные технологии и браузеры сделают его частью названия элемента.

    Обычно важные для смысла элементы добавляют через HTML, но бывает, что это делают через CSS. Предположим, нам достались стили для <span> от предыдущей команды разработчиков. Опишем знак копирайта «©» из псевдокласса:

            
          
          span::before {  content: "©" / "Авторские права:";}
          span::before {
  content: "©" / "Авторские права:";
}

    Можете добавить описание и к url:

            
          
          span::after {  content: url(./img/fancy-symbol.svg) / "Не обязательно";}
          span::after {
  content: url(./img/fancy-symbol.svg) / "Не обязательно";
}

    Используйте этот трюк с умом. К примеру, когда скринридеры не знакомы с символом или не могут озвучить иконку из ::before или ::after. Ссылки и другие интерактивные элементы лучше вообще обходить стороной. Дело в том, что пользователи голосового управления не узнают об альтернативном описании в content. Разберём на примере ссылки:

            
          
          <a href="#">Грегор Замза</a>
          <a href="#">Грегор Замза</a>

        
        
          
        
      
            
          
          /* Не делайте так ❌ */a::before {  content: "©" / "Авторские права:";}
          /* Не делайте так ❌ */
a::before {
  content: "©" / "Авторские права:";
}

    Для браузеров и скринридеров текст ссылки будет «Авторские права: Грегор Замза». Пользователи голосового управления увидят только «Грегор Замза». Ничего не произойдёт, когда они попытаются перейти по ссылке командой «Грегор Замза, клик».

    Читайте также

    • attr()

      Хотите сделать атрибут элемента видимым на странице? Используйте эту функцию!

    • quotes

      Свойство для управления внешним видом кавычек.

    • <blockquote>

      Любой текст сильнее с цитатой! Как её правильно вставить в HTML?