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

Question

所以我搜索了高低，但无法找到看似简单问题的答案。

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

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

其中显示：

1. 这里有一些文字
2. 这里还有一些文字..
3. 哦，是的，这里有一些漂亮的文字

我真正想展示的内容：

第 1 步。这里有一些文字

第 2 步。这里还有一些文字..

第 3 步。哦，是的，这里有一些漂亮的文字

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

Answer 1

您可以使用::before（IE8 为:before）和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>