Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

content

CSScontent
mangohost

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

Общие сведения

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

Содержимое добавляемое с помощью свойства content может быть строкой текста, символами, изображениями счётчиками (для стилизации списков) или цитатами. Также можно комбинировать несколько значений.

Обратите внимание, что свойство content должно находится среди других свойств псевдоэлементов ::before и ::after, иначе содержимое просто не будет добавлено на страницу. 

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

  • Синтаксис:
    content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
  • Значение по умолчанию: normal
  • Применяется: к псевдоэлементам ::before и ::after
  • Наследуется: нет
  • Анимируется: нет

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

  • none - содержимое на страницу не добавляется. Псевдоэлемент не создаётся.
  • normal - вычисляется как none для псевдоэлементов ::before и ::after.
  • <string> - строка текста. Строка текста заключённая в кавычки. Смотрите тип данных <string> чтобы узнать полный список возможных значений.
  • <uri> - URI указывается с помощью функции url(). Он указывает на внешний ресурс, такой как изображение. Если ресурс или изображение не могут быть отображены, то браузер должен либо оставить всё так как будто оно вообще не было указано, либо показать предупреждение, что ресурс не может быть отображён.
  • <counter> - CSS счётчик. Счётчики могут быть указаны с помощью двух разных функций: counter() или counters().
  • open-quote | close-quote -  эти значения заменяются строкой указанной в свойстве quotes.
  • no-open-quote | no-close-quote - Перестаёт отображать quotes, но продолжает увеличивать (уменьшать) уровень вложенности кавычек. Смотрите quotes.
  • attr(X) - функция (аббревиатура от слова "attribute"), которая возвращает в качестве строки значение атрибута "X". Если у элемента нет атрибута "X", то вернётся пустая строка.

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

CSS Generated content for pseudo-elements

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Примечание

Комбинирование значений

В свойстве content можно комбинировать разные варианты значений. В дальнейшем они объединятся в одно. Например, в приведённом ниже коде я получаю значение из кастомного data-атрибута и и добавляю после него точку с запятой.

li::before {
  content: attr(data-title) ";";
  color: red;
}

Пример

Ниже показаны различные варианты использования свойства content.

mangohost