如何使用CSS为带有静态字符串的有序列表项编号加前缀？

Question

我想要这个HTML ...

<ol style="list-style:decimal;">
<li>Apples</li>
<li>Oranges</li>
</ol>

......像这样呈现

Q1.苹果
Q2.桔子

换句话说,我希望自动生成的数字以静态字符串"Q"为前缀.

我试过像这样的CSS:

ol li:before
{
  content:"Q";
}

但这产生了这个:

1. QApples
2. QOranges

我也尝试过使用"list-style:numbers inside;",但这只是将列表向右移动,结果相同.我找不到以任何方式引用自动生成的数字元素以向其添加CSS样式信息的方法.这看起来像是一个简单,常见的场景,但我找不到任何方法用简单的CSS(没有CSS计数器,JavaScript等)来实现它.

Answer 1

唯一的纯CSS方式是使用计数器:

ol {
    counter-reset: item;
    list-style-type: decimal;
}

ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

除了使用CSS计数器(专门为这些用例设计!)或JavaScript之外,你无法实现这一点.

顺便说一句,这是decimal不是numbered.