将自定义文字添加到有序列表中< li> [英] Add custom text to ordered list <li>

问题描述

我尝试使用< ol> 和< li> 烹饪方向。但是，我需要在每个自动计算之前添加文本Step，如下所示：

 < ol> 
< li>将包放在冰箱等...< / li> 
< li>预热烤箱< / li> 
< / ol> 
  

步骤1。将包放入冰箱等...

步骤2。预热烤箱

---

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

  li：before {
 content：Step; 
 font-weight：bold; 
} 
  

这是结果

1。步骤将包放入冰箱等

2。步骤预热烤箱

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

解决方案

感谢黄主指向我在列表之前添加文本，我在其中找到了我的解决方案：

HTML：
$ b

 < ol> 
< li>将包放在冰箱等...< / li> 
< li>预热烤箱< / li> 
< / ol> 
  

CSS

  ol {
 list-style-type：none; 
 counter-reset：elementcounter; 
 padding-left：0; 
} 
 
 li：before {
 content：Stepcounter（elementcounter）。 
 counter-increment：elementcounter; 
 font-weight：bold; 
} 
  

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

结果： 将包放入冰箱等...

$ b b $ b

第2步。预热烤箱

I'm trying to use <ol> and <li> to create an ordered list of cooking directions. However, I need to add the text "Step" before each automatic numeration so it looks as follows:

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

Step 1. Place bag in freezer, etc...

Step 2. Preheat oven

---

I tried using the :before selector in CSS, but it's placing the custom text "Step" in between the automatic numeration and the content. Here's my CSS:

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

And this is the result

1. Step Place bag in freezer, etc...

2. Step Preheat oven

Is there a way to modify the default behavior so it automatically lists "Step 1", "Step 2", etc?

解决方案

Thanks to Huangism for pointing me to Adding text before list, where I found my solution:

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;
}

I had to tweak the padding-left because list-style-type: none; got rid of the automatic numbering, but still left the space it would've taken up.

Result:

Step 1. Place bag in freezer, etc...

Step 2. Preheat oven

这篇关于将自定义文字添加到有序列表中< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！