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

Question

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

16

我想用 <ol> 和 <li> 来创建有序的烹饪指导列表。不过，我需要在每个自动编号之前添加文本“步骤”，以使它看起来如下：

<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”等？

- Marquizzo

同意。您可以使用那个答案中的确切代码。 - PT_C

是的。那个答案正是我在寻找的。我到处找过，之前都找不到。 - M -

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marquizzo · Accepted Answer

感谢Huangism向我指出在列表前添加文本的问题，我在其中找到了解决方案：

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;去掉了自动编号，但仍然保留了所占用的空间，所以我不得不调整填充左侧。