在列表前添加文本答案

【问题标题】：Adding text before list在列表前添加文本
【发布时间】：2012-02-13 09:23:23
【问题描述】：

我正在尝试制作一个类似的列表
元素 1. 鸟
元素 2. 狮子
...

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

【问题讨论】：

你指的是哪种语言？
我正在尝试使用 HTML
我看到了 li.Madde:before {content:"Element"; text-indent: 10px;} 添加文本。但我想列出元素 1 元素 2 但它确实 1. 元素 2. 元素

【解决方案1】：

#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>

【讨论】：

它做了我想要的，但我还有一个问题。我有一个嵌套列表，例如：元素 1：鸟元素 2：狮子元素：白狮子元素 3：狗当我想创建一个嵌套列表时，它会为每个 li 项目提供增量，我不希望它发生你有什么建议吗?
我无法真正重现您的错误，但我认为> 选择器应该可以帮助您。这只会选择直接子代。
Right ">" 帮助我再次感谢 Zeta :)

【解决方案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>

【讨论】：