所以我一直在搜索高低,并且无法找到一个看似简单问题的答案.
我有一个这样的有序列表:
<ol> <li>Some text here</li> <li>Some more text here..</li> <li>Oh yeah,here's some pretty text</li> </ol>
哪个显示:
- Some text here
- Some more text here..
- 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>