Add custom text to <li>

Question

I am trying to use <ol> and <li> to create an ordered list of cooking directions. However, before each automatic numbering, I need to add the text "Step" so that it looks like this:

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

Step 1. Put the bag in the freezer, etc.

Step 2. Preheat the oven

---

I tried using the :before selector in CSS, but it put the custom text “Step” between automatic numbering and content. Here is my CSS:

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

And this is the result

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

2. Step Preheat the oven

Is there a way to change the default behavior, so it automatically lists “Step 1”, “Step 2”, etc.

Answer 1

Thanks to Huangism for pointing out Adding Text in front of the list , where I found my solution:

HTML:

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

CSS

 ol{ list-style-type: none; counter-reset: elementcounter; padding-left: 0; } li:before{ content: "Step " counter(elementcounter) ". "; counter-increment:elementcounter; font-weight: bold; } 

I had to tune padding-left because list-style-type: none; got rid of automatic numbering, but still left a space that it would occupy.

Result:

Step 1. Put the bag in the freezer, etc.

Step 2. Preheat the oven