Свойство content позволяет вставлять в теги произвольный генерируемый текст. Применяется совместно с псевдоэлементами after и before.
Синтаксис
селектор::after {
content: текст;
}
селектор::before {
content: текст;
}
Пример
Давайте в начало и конец текста тега li вставим дополнительный текст:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
content: '!!!';
}
li::after {
content: '???';
}
:
Пример
К вставляемому тексту можно применять различные стили. Покрасим, к примеру, этот текст в какой-нибудь цвет:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
color: red;
content: '!!!';
}
li::after {
color: green;
content: '???';
}
:
Смотрите также
-
функцию attr,
которая получает значение атрибута тега -
свойство counter-increment,
которое задает автоматическую нумерацию