Add custom text to ordered list [duplicate]

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