如何在列表中加一个单词前缀 [英] How to prefix a word in a list number

问题描述

所以我搜索了高低，并且一直无法找到一个看似简单的问题。

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

 < ol> 
< li>一些文字在这里< / li> 
< li>一些更多文字在这里..< / li> 
< li>哦，是的，这里有一些漂亮的文字< / li> 
< / ol> 
  

显示：

1. 这里有一些文字


2. 这里有更多文字..


3. 哦，是的， / li>
   

我想真正展示的内容：

第1步。这里的一些文本

第2步。更多文字在这里..

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

问题：可能的话，如果是的话，我将如何去做，而不使用可疑的解决方案？

您可以使用 :: before （：在IE8之前）和 counter-reset / increment

ol {counter-reset：numb呃;}李{list-style：none; counter-increment：number;} li :: before {content：Stepcounter（number）。;位置：相对; left：-5px}

< ol> < li>一些文字在这里< / li> < li>更多文字在这里..< / li> < li>哦，是的，这里有一些漂亮的文字< / li>< / ol>

So I've searched high and low and have been unable to find an answer for a seemingly simple problem.

I have an ordered list like this:

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

Which displays:

1. Some text here
2. Some more text here..
3. Oh yeah, here's some pretty text

What I'd like to really display:

Step 1. Some text here

Step 2. Some more text here..

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

Question: Is this possible, and if so, how would I go about doing it without using questionable solutions?

解决方案

You can use ::before (:before for IE8) and 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>

这篇关于如何在列表中加一个单词前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！