Свойство counter-increment
Описание
Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
Применяется совместно с псевдоэлементами ::after и ::before.
Синтаксис
counter-increment: [переменная | число?] + none;
Значение | Описание |
none | Запрещает увеличение счётчика для текущего селектора. |
число | Определяет значение приращения счётчика. Можно использовать только положительные целые числа, отрицательные целые числа и ноль. |
переменная | Задаёт одну или несколько переменных, для которых требуется изменить значение счётчика. Переменные разделяются между собой пробелом. |
Код | Результат |
| Список начинается с нуля. 0, 1, 2 |
| Выводятся все чётные числа. 2, 4, 6 |
| Выводятся все нечётные числа. 1, 3, 5 |
| Список начинается с 10. 10, 11, 12 |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
body {
counter-reset: heading;
}
#test:before {
counter-increment: heading;
content: 'Пункт ' counter(heading) '. ';
}
</style>
<h2 id='test'>HTML</h2>
<h2 id='test'>CSS</h2>
<h2 id='test'>JavaScript</h2>
</body>
</html>
HTML
CSS
JavaScript
Читайте также
Свойство max-height
Устанавливает максимальную высоту элемента.<br><br>Значение высоты элемента будет выч...
Свойство text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлич...
Стиль первой строки форматированного текста
Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки ...
Стиль последнего элемента определённого типа
Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских э...
Свойство padding-inline-end
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по ст...