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

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(: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>