Benutzerdefinierten Text zur sortierten Liste hinzufügen <li> [duplicate]

Diese Frage hat hier bereits eine Antwort:

Hinzufügen von Text vor der Liste 1 Antwort

Ich versuche, @ zu verwend<ol> und<li>, um eine geordnete Liste der Garanweisungen zu erstellen. Ich muss jedoch vor jeder automatischen Nummerierung den Text "Step" einfügen, damit er wie folgt aussieht:

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

Schritt 1 Beutel in den Gefrierschrank legen, etc ...

Schritt 2 Ofen vorheize

Ich habe versucht, mit der:before Selektor in CSS, aber es platziert den benutzerdefinierten Text "Schritt" zwischen der automatischen Nummerierung und dem Inhalt. Hier ist mein CSS:

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

Und das ist das Ergebnis

1. Schrit Beutel in den Gefrierschrank legen, etc ...

2. Schrit Ofen vorheize

Gibt es eine Möglichkeit, das Standardverhalten so zu ändern, dass automatisch "Schritt 1", "Schritt 2" usw. aufgeführt werden?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage