html - etiqueta - ¿Cómo puedo prefijar números de elementos de lista ordenados con una cadena estática usando CSS?
title css (2)
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:
- QApples
- 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.).
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;
}
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 .