在列表前添加文本 [英] Adding text before list

问题描述

我正在尝试制作一个像
元素的列表元素1. bird

元素2. lion

...

问题是我不想为每个项目编写元素。有什么方法可以将内容添加到我的列表中？

解决方案

您需要 CSS计数器：

  #customlist {/ *删除默认计数器* / list-style-type：none; / *创建自定义计数器并将其设置为0 * / counter-reset：elementcounter;}＃customlist> li：之前{/ *打印出Element后跟当前计数器值* / content：Elementcounter（elementcounter） ：; / * increment counter * / counter-increment：elementcounter;}  

< ol id =customlist> <李>大象< /锂> <李>鸟< /锂> < li> Lion< / li>< / ol>

I am trying to make a list like
Element 1. bird
Element 2. lion
...

The problem is I don't want to write "Element" for every item. Is there any way to add content to my list?

解决方案

You need 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>

这篇关于在列表前添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！