如何在列表编号中添加单词前缀

Question

所以我四处搜索，却找不到一个看似简单问题的答案。

我有一个这样的有序列表：

<ol>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ol>

其中显示：

Some text here

Some more text here..

Oh yeah, here's some pretty text

我真正想展示的内容：

Step 1. Some text here

Step 2. Some more text here..

Step 3. Oh yeah, here's some pretty text

问题：这是否可能，如果可能，我将如何在不使用有问题的解决方案的情况下进行？

Answer 1

您可以使用 ::before（:before 适用于 IE8）和 counter-reset/increment

ol {
  counter-reset: number;
}
li {
  list-style: none;
  counter-increment: number;
}
li::before {
  content: "Step " counter(number) ".";
  position: relative;
  left:-5px
}

<ol>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ol>

如何在列表编号中添加单词前缀

How to prefix a word in a list number

html

css

html-lists

pseudo-element