Добавить пользовательский текст в упорядоченный список <li> [duplicate]
На этот вопрос уже есть ответ здесь:
Добавление текста перед списком 1 ответЯ пытаюсь использовать<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» и т. Д.?