我想要这个HTML …
<ol style="list-style:decimal;"> <li>Apples</li> <li>Oranges</li> </ol>
…这样渲染
Q1.苹果
Q2.橘子
我试过这样的CSS：
ol li:before
{
content:"Q";
}
但是,这产生了这一点：
> QApples
> QOranges
我也试过使用“list-style：numbers inside”;但是只是将列表移到右边,结果相同.我找不到以任何方式引用自动生成的数字元素来添加CSS样式信息的方式.这似乎是一个简单而常见的情况,但我无法找到任何方式来完成它的直接的CSS(没有CSS计数器,JavaScript等).
解决方法
唯一纯CSS的方式是
counters：
ol {
counter-reset: item;
list-style-type: decimal;
}
ol li:before {
content: 'Q' counter(item,decimal) '. ';
counter-increment: item;
}
除了使用CSS计数器(专门用于这种用例！)或JavaScript以外,您无法实现这一点.
顺便说一句,it’s decimal,not numbered.
