Add custom text to ordered list <li> [duplicate]

Question

I'm trying to use <ol> and <li> to create an ordered list of cooking directions. However, I need to add the text "Step" before each automatic numeration so it looks as follows:

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

Step 1. Place bag in freezer, etc...

Step 2. Preheat oven

---

I tried using the :before selector in CSS, but it's placing the custom text "Step" in between the automatic numeration and the content. Here's my CSS:

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

And this is the result

1. Step Place bag in freezer, etc...

2. Step Preheat oven

Is there a way to modify the default behavior so it automatically lists "Step 1", "Step 2", etc?

Answer 1

Thanks to Huangism for pointing me to Adding text before list, where I found my solution:

ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 0;
}

li:before {
  content: "Step " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

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

I had to tweak the padding-left because list-style-type: none; got rid of the automatic numbering, but still left the space it would've taken up.

Result:

Step 1. Place bag in freezer, etc...

Step 2. Preheat oven