如何使用CSS爲靜態字符串添加有序列表項號碼？

Question

我想這HTML ...

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

...來呈現這樣

Q1。 Q2。蘋果
Q2。橘子

換句話說，我希望自動生成的數字前綴爲靜態字符串「Q」。

我已經試過CSS是這樣的：

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

但是產生這樣的：

1. QApples
2. QOranges

我用「還試圖列表 - 樣式：內部編號;「，但只是將列表向右移動，結果相同。我無法找到一種方法來引用自動生成的數字元素以任何方式向他們添加CSS樣式信息。這似乎是這樣一個簡單的，常見的情況，但我找不到任何方式用簡單的CSS（沒有CSS計數器，JavaScript等）來完成它。

Answer 1

唯一的純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。

Answer 2

有一個，脆弱，非計數法，但它不易斷裂：

ol { 
    list-style-type: decimal; 
    margin: 0 0 0 2em; 
} 

li { 
    position: relative; 
} 

ol li:first-letter { 
    color: #f90; 
    float: left; 
    position: relative; 
    margin-left: -2em; 
} 

JS Fiddle demo。