Add custom text to ordered list

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?

Yep. That answer had exactly what I was looking for. I looked all over the place, and couldn't find it before. — M -, Sep 24 '14 at 19:48

score 20 · Accepted Answer · edited Nov 18 '19 at 07:03

20

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

edited Nov 18 '19 at 07:03

Esko

4,109
2
22
37

answered Sep 24 '14 at 19:52

M -

26,908
11
49
81

Its working, thanks. But im trying to change start value. eg. step 5, step 6 .... My code is: "ol[list-type=case]>li:before{ content: "Step " counter(elementcounter) ":"; font-weight: bold; } ol[list-type=case]>li{ list-style-type: none; counter-increment:elementcounter; }" – Bala Mar 18 '19 at 12:22

Add custom text to ordered list

1 Answers1

Linked