Esta pregunta ya tiene una respuesta aquí:

Estoy tratando de usar<ol> y<li> para crear una lista ordenada de instrucciones de cocción. Sin embargo, necesito agregar el texto "Paso" antes de cada numeración automática para que tenga el siguiente aspecto:

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

Paso 1. Coloque la bolsa en el congelador, etc.

Paso 2. Precalentar el horno

Intenté usar el:before selector en CSS, pero coloca el texto personalizado "Paso" entre la numeración automática y el contenido. Aquí está mi CSS:

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

Y este es el resultado

1. Paso Coloque la bolsa en el congelador, etc.

2. Paso Precalentar el horno

¿Hay alguna forma de modificar el comportamiento predeterminado para que enumere automáticamente "Paso 1", "Paso 2", etc.