Question

我正在尝试使用<ol>和<li>来创建烹饪方向的有序列表。但是，我需要在每次自动计算之前添加文本“Step”，因此它看起来如下：

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

第1步。将行李放入冰箱等......

第2步。预热烤箱

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

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

这是结果

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

2。步骤预热烤箱

有没有办法修改默认行为，以便自动列出“第1步”，“第2步”等？

Answer 1

感谢Huangism指点我Adding text before list，在那里找到了我的解决方案：

<强> HTML：

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

<强> CSS

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

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

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

<强>结果：

第1步。将行李放入冰箱等......

第2步。预热烤箱

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

1 个答案: