Как я могу префикс упорядоченных номеров элементов списка с помощью статической строки с помощью CSS?

Я хочу этот HTML...

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

... чтобы сделать это

Q1. Яблоки
Q2. Апельсины

Другими словами, я хочу, чтобы автоматически сгенерированные числа префикс статической строки "Q".

Я пробовал CSS следующим образом:

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

Но это производит следующее:

QApples
QOranges

Я также попытался использовать "list-style: numbered inside;", но это просто сдвигает список вправо с теми же результатами. Я не могу найти способ ссылаться на автоматически генерируемые элементы номера, чтобы добавить к ним информацию стилей CSS. Это похоже на простой простой сценарий, но я не могу найти способ сделать это с помощью простого CSS (без счетчиков CSS, JavaScript и т.д.).

Ответ 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 decimal, а не numbered.

Ответ 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.