参见英文答案 >
Adding text before list1个
我正在尝试使用< ol>和< li>创建烹饪方向的有序列表.但是,我需要在每次自动计算之前添加文本“Step”,因此它看起来如下：
我正在尝试使用< 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.步骤预热烤箱
解决方法
感谢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;
}
我不得不调整padding-left因为list-style-type：none;摆脱了自动编号,但仍然留下了它将占用的空间.
结果：
步骤1.将袋子放入冰箱等……
步骤2.预热烤箱
