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

前端之家收集整理的这篇文章主要介绍了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
@H_404_17@

我想要真正展示的内容

Step 1. Some text here

Step 2. Some more text here..

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

@H_404_17@

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

解决方法

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

猜你在找的HTML相关文章