Как я могу добавить префикс упорядоченных номеров элементов списка к статической строке, используя 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: numbered 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.

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 .