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

所以我一直在搜索高低,并且无法找到一个看似简单问题的答案.

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

<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

问题：这是否可行,如果是这样,如何在不使用可疑解决方案的情况下进行此操作？

解决方法

你可以使用:: 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>

原文地址：https://www.jb51.cc/html/231916.html