html - etiqueta - ¿Cómo puedo prefijar números de elementos de lista ordenados con una cadena estática usando CSS?

title css

Question

Quiero este HTML ...

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

... para hacer como esta

Q1. Las manzanas
Q2. Naranjas

En otras palabras, quiero que los números generados automáticamente tengan el prefijo de la cadena estática "Q".

He intentado CSS de esta manera:

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

Pero eso produce esto:

1. QApples
2. QOranges

También he intentado usar "list-style: numbered inside;", pero eso solo desplaza la lista a la derecha con los mismos resultados. No puedo encontrar una manera de hacer referencia a los elementos numéricos generados automáticamente para agregarles información de estilo CSS. Esto parece un escenario tan simple y común, pero no puedo encontrar ninguna manera de lograrlo con CSS sencillo (sin contadores de CSS, JavaScript, etc.).

Answer 1

Existe un método no frágil , no frágil , 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;
}

Demostración de JS Fiddle .

Answer 2

La única forma pura de CSS es con counters :

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

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

No puede lograr esto además de usar contadores de CSS (que fueron diseñados específicamente para tales casos de uso) o JavaScript.

Por cierto, es decimal , no numbered .