在列表之前添加文本

Question

我正在尝试列出像这样的列表 元素1.鸟
元素2.狮子 ...

问题是我不想为每个项目写“元素”。有没有办法将内容添加到我的列表中？

Answer 1

您需要CSS counters：

#customlist {
  /* delete default counter */
  list-style-type: none;
  /* create custom counter and set it to 0 */
  counter-reset: elementcounter;
}

#customlist>li:before {
  /* print out "Element " followed by the current counter value */
  content: "Element " counter(elementcounter) ": ";
  /* increment counter */
  counter-increment: elementcounter;
}

<ol id="customlist">
  <li>Elephant</li>
  <li>Bird</li>
  <li>Lion</li>
</ol>

Answer 2

现在我们不仅可以使用计数器，还可以使用 ::marker 伪元素。

例如，作为这个问题的答案：How to replace the dot '.' from an ordered list of type 'a'

ol {
 list-style-type: lower-alpha;
 counter-reset: listcounter;
 padding-left: 30px;
}
li {
 counter-increment: listcounter;
}
li::marker {
 content: counter(listcounter, lower-alpha) ": ";
}

<ol type="a">
  <li>Element a</li>
  <li>Element b</li>
  <li>Element c</li>
</ol>