html – 将自定义文本添加到有序列表>
发布时间：2020-12-14 18:38:09 所属栏目：资源 来源：网络整理
导读：参见英文答案 Adding text before list1个 我正在尝试使用 ol和 li创建烹饪方向的有序列表.但是,我需要在每次自动计算之前添加文本“Step”,因此它看起来如下： ol liPlace bag in freezer,etc.../li liPreheat oven/li/ol 步骤1.将袋子放入冰箱等…… 步骤2
|
参见英文答案 >
Adding text before list1个
我正在尝试使用< 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”等？ 解决方法
感谢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.预热烤箱 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |