Урок 49 из 53 · 7 мин

Счётчики и content

counter-reset, counter-increment, counter() и content в псевдоэлементах.

Шаг 1, шаг 2

В рецепте шаги «Шаг 1», «Шаг 2». Добавляю шаг в середину — всё перенумеровывать?
Бро
CSS умеет считать. Ставим счётчик — он нумерует сам.

Свойство

counter-reset

Свойство

counter-increment

Функция

counter()

Что это: content: "Шаг " counter(step) в ::before.
Зачем: Нумерация в любом оформлении.
Как: HTML
<style> .r { counter-reset: step; } .r p { counter-increment: step; margin: 2px 0; } .r p::before { content: "Шаг " counter(step) ": "; color: #c8763a; font-weight: bold; } </style> <div class="r"><p>Карандаш</p><p>Сливки</p><p>Взбить</p></div>
Так это выглядит

Ваш ход

Задание

У .recipe задай counter-reset: step, у .recipe li — counter-increment: step, а в .recipe li::before — content: "Шаг " counter(step).

<style>
.recipe { list-style: none; }
</style>
<ol class="recipe"><li>Карандаш</li><li>Сливки и сахар</li><li>Взбить паром</li></ol>

<style>
.recipe { list-style: none; }
</style>
<ol class="recipe"><li>Карандаш</li><li>Сливки и сахар</li><li>Взбить паром</li></ol>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Где ставят counter-reset?