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

content

CSS content

Свойство 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.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

Примечание

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

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

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

Пример

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