我正在尝试使用<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”等？
感谢Huangism指出我要在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.预热烤箱
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句