¿Cómo puedo prefijar los números de los artículos de la lista con una cadena estática usando CSS?

Question

Quiero este código HTML ...

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

... para hacer como esto

Q1. Manzanas
Q2. Naranjas

En otras palabras, quiero que los números generados automáticamente sean prefijados con la cadena estática "Q".

He intentado CSS como esto:

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

Pero que produce esto:

1. QApples
2. QOranges

También he intentado usar "lista- estilo: numerado adentro; ", pero eso simplemente cambia la lista a la derecha con los mismos resultados. No puedo encontrar una manera de hacer referencia a los elementos numéricos autogenerados de ninguna manera para agregarles información de estilo CSS. Parece un escenario tan simple y común, pero no encuentro ninguna forma de lograrlo con CSS sencillo (sin contadores de CSS, JavaScript, etc.).

Answer 1

La única manera es puro CSS con counters:

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

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

No se puede lograr esto, además de utilizar los contadores de CSS o JavaScript (que fueron diseñados específicamente para este tipo de casos de uso!).

Por cierto, it's decimal, not numbered.

Answer 2

Hay una, frágil método, no de venta libre, pero es propenso a romperse:

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.