content

Пример

В следующем примере значение атрибута href вставляется в круглые скобки после каждого элемента <a>:

a::after {
content: " (" attr(href) ")";
}

Определение content

CSS свойство content используется с псевдоэлементами ::before и ::after для вставки сгенерированного содержимого.

Значение по умолчанию:	normal
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS2
JavaScript синтаксис:	Вы не можете присвоить элементу псевдокласс с помощью JavaScript, но есть и другие способы получить тот же результат: Попробуй

Поддержка content

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
content	1.0	8.0	1.0	1.0	4.0

Синтаксис content

Значения content

Значение	Описание	Пример
normal	Значение по умолчанию. Устанавливает для содержимого, если оно указано, значение normal, которое по умолчанию равно "none" (то есть ничего)	Попробовать »
none	Устанавливает содержимое, если оно указано, равным нулю	Попробовать »
counter	Устанавливает содержимое в качестве счетчика	Попробовать »
attr(атрибут)	Устанавливает содержимое в качестве одного из атрибутов селектора	Попробовать »
string	Устанавливает соответствие содержимого указанному вами тексту	Попробовать »
open-quote	Устанавливает содержимое в качестве вступительной цитаты	Попробовать »
close-quote	Устанавливает содержимое в качестве заключительной цитаты	Попробовать »
no-open-quote	Удаляет начальную цитату из содержимого, если она указана	Попробовать »
no-close-quote	Удаляет закрывающую кавычку из содержимого, если она указана	Попробовать »
url(url)	Устанавливает, что содержимое является каким-либо носителем информации (изображение, звук, видео и т.д.).	Попробовать »
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit	Попробовать »

Примеры content

Пример

Как добавить цвета маркеров для <ul> или <ol>, удалив их маркеры по умолчанию и добавив HTML-объект, который выглядит как маркеры (•):

ul {
list-style: none; /* Удалить маркеры HTML */
padding: 0;
margin: 0;
}

li {
padding-left: 16px;
}

li::before {
content: "•"; /* Вставьте содержимое, похожее на маркеры */
padding-right: 8px;
color: blue; /* Или цвет, который вы предпочитаете */
}

Попробуйте сами »