Adicionar texto personalizado à lista ordenada <li> [duplicado]
Esta pergunta já tem uma resposta aqui:
Adicionando texto antes da lista 1 respostaEstou 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.?