Adicionar texto personalizado à lista ordenada <li> [duplicado]

Esta pergunta já tem uma resposta aqui:

Estou tentando usar<ol> e<li> para criar uma lista ordenada de instruções de cozimento. No entanto, preciso adicionar o texto "Etapa" antes de cada numeração automática para que fique da seguinte maneira:

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

Passo 1. Coloque o saco no congelador, etc ...

Passo 2. forno pré aquecido

Eu tentei usar o:before seletor em CSS, mas está colocando o texto personalizado "Step" entre a numeração automática e o conteúdo. Aqui está o meu CSS:

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

E esse é o resultado

1. Etapa Coloque o saco no congelador, etc ...

2. Etapa forno pré aquecido

Existe uma maneira de modificar o comportamento padrão para que ele liste automaticamente "Etapa 1", "Etapa 2" etc.?