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

Question

我正在尝试使用<ol>并<li>创建一个有序的烹饪方向列表.但是,我需要在每次自动计算之前添加文本"Step",使其如下所示:

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

步骤1.将袋子放入冰箱等......

步骤2.预热烤箱

---

我尝试:before在CSS中使用选择器,但它将自定义文本"Step"放在自动计算和内容之间.这是我的CSS:

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

这就是结果

1.将袋放入冰箱等处...

2.步骤预热烤箱

有没有办法修改默认行为,以便自动列出"步骤1","步骤2"等？

Answer 1

感谢Huangism指向我在列表前添加文本,在那里我找到了我的解决方案:

HTML:

ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 0;
}

li:before {
  content: "Step " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

CSS

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

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

结果:

步骤1.将袋子放入冰箱等......

步骤2.预热烤箱