将自定义文本添加到有序列表<li>

Question

我正在尝试使用<ol>和<li>创建一个有序的烹饪指南列表。但是，我需要在每个自动计数之前添加文本"Step“，以便如下所示：

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

步骤1.把袋子放在冰箱等.

步骤2.预热炉

我尝试在CSS中使用:before选择器，但它将自定义文本“步骤”放在自动计数和内容之间。这是我的CSS：

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

这就是结果

1.把放在冰箱里等.

2.步骤预热炉

是否有方法修改默认行为，以便自动列出“步骤1”、“步骤2”等？

Answer 1

感谢黄教向我指出Adding text before list，在那里我找到了我的解决方案：

​

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>

​

我不得不调整填充-左，因为list-style-type: none;摆脱了自动编号，但仍然留下了它将占用的空间。

结果：

步骤1.把袋子放在冰箱等.

步骤2.预热炉