На этот вопрос уже есть ответ здесь:

Я пытаюсь использовать<ol> а также<li> создать упорядоченный список направлений приготовления. Однако мне нужно добавить текст «Шаг» перед каждой автоматической нумерацией, чтобы он выглядел следующим образом:

<ol>
    <li>Place bag in freezer, etc...</li>
    <li>Preheat oven</li>
</ol>

Шаг 1. Положите сумку в морозильник и т. Д.

Шаг 2. Разогреть духовку

Я пытался использовать:before Селектор в CSS, но он помещает пользовательский текст «Шаг» между автоматической нумерацией и содержимым. Вот мой CSS:

li:before{
    content: "Step ";
    font-weight: bold;
}

И это результат

1. Шаг Положите сумку в морозильник и т. Д.

2. Шаг Разогреть духовку

Есть ли способ изменить поведение по умолчанию, чтобы в нем автоматически отображались «Шаг 1», «Шаг 2» и т. Д.?