content

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

Значение свойства 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", то вернётся пустая строка.

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

Примечание

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

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

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

Пример

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