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

Question

因此，我四处搜索，但未能找到一个看似简单问题的答案。

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

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

显示:

1. Some text here
2. Some more text here..
3. 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 for 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>