Руководство по CSS

Псевдо-класс

content

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

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

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

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

Примечания

Доступность

Контент добавленный с помощью псевдо-элементов не добавляется в DOM, а отображается только визуально. Кроме того, так как их не существует в DOM, вы не сможете к ним обратиться по средством JavaScript.

Псевдо-элементы в основном используются для вставки и стилизации дополнительного контента, и не следует добавлять контент который имеет отношение к смыслу и полноте содержания всей страницы.

Официальный синтаксис

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>.

Пример: Добавляем слово "New!" для элементов которые имеют класс .new.

.new::after {
        content: "New!";
        color: green;
    }

Вы также можете добавить новые строки написав escape-последовательность разрыва строки - \A в одной из строк свойства content.

<uri>

URI задается с помощью функции url(). Она указывает на внешний ресурс, например изображение.

Пример: добавляем иконку для кнопки с классом .signup.

button.signup::before {
        content: url(path/to/signup.png);
    }
<counter>

CSS Счетчик. Счетчики могут быть заданы с помощью двух функций: counter() и counters().

Пример:

li {
        content: counter(my-counter-name);
    }
open-quote | close-quote

Данные значения заменяют строку с помощью стилевого свойства quotes для добавление кавычек.

q, blockquote {
      quotes: "“" "”" "‘" "’";
    }
    q:before, blockquote:before {
        content: open-quote;
    }
    q:after, blockquote:after {
        content: close-quote;
    }
no-open-quote | no-close-quote

Отменяет добавление открывающей/закрывающей кавычки.

attr(X)

Данная функция (аббревиатура от "атрибут") возвращает в виде строки значение атрибута X к элементу. Если элемент не имеет атрибута X, возвращается пустая строка.

Например, ссылки имеют атрибут href, который определяет местоположение, на которое указывает ссылка. Используя свойство content вместе с функцией attr() вы можете получить URL значение атрибута href. Это может быть использовано при печати страницы, с отображением URL ссылок (используя псевдо-элемент ::after). Например:

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

Указанное правило выбирает все ссылки, которые имеют атрибут href (используя селектор атрибутов), извлекает значение атрибута ссылки, используя функцию attr(), а затем использует это значение в качестве содержания псевдо-элемента ::after, которое будет добавлено после ссылки.

Функция attr() может возвращать значение любого атрибута, в том числе HTML5 атрибутов данных. Пример:

<li data-label="todo">Buy Milk</li>
li::before {
    content: attr(data-label);
    color: grey;
}

В CSS3, выражение attr() получает новый синтаксис. Новый синтаксис не стабилен, пока не поддерживается ни в одном браузере, и еще даже нет примеров его использования. Спецификация говорит о том, что новый синтаксис может быть отброшен на стадии Candidate Recommendation. Если новый синтаксис не удалят, мы отредактируем эту запись с новыми значениями. Синтаксис выглядит следующим образом:

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

Где <attr-name> - имя атрибута, <type-or-unit> - необязательный аргумент, который указывает как интерпретировать значение атрибута и определяет тип для выражения attr(). Если этот параметр не используется, в качестве типа значения будет подразумевается строка. Аргумент <attr-fallback> - представляет собой резервное значение, которое используется если указанный атрибут отсутствует, или его значение не может быть использовано в указанном типе данных.

Типом или блоком аргумента может быть одно из следующих значений: ‘string’, ‘color’, ‘url’, ‘integer’, ‘number’, ‘length’, ‘angle’, ‘time’, или ‘frequency’.

Можно комбинировать различные значения контента в свойстве content. Значения объединяются в одно целое. Например, следующее значение будет извлекать значение атрибута data-label и добавит двоеточие после него:

li::before {
    content: attr(data-label) ":";
    color: grey;
}

Улучшим приведенный выше пример, где мы извлекаем значение атрибута href для печати страницы. Печать URL, без каких-либо визуальных разделителей, может только запутать читателя, поэтому предпочтительно добавлять URL в скобки. Это возможно сделать путем объединения функции attr() с двумя строками текста:

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

Живой пример

Пример ниже показывает как добавить различное содержание с помощью свойства content и псевдо-элементов ::before и ::after.

See the Pen add content ::before ::after by Siteacademy (@Siteacademy) on CodePen.

Вы можете увидеть больше примеров на странице псевдо-элементов ::before и ::after.

Поддержка браузеров

Свойство content поддерживается во всех современных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, Android и iOS.

Связанные статьи

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.