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

Я хочу, чтобы этот 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 и т. Д.).

17
задан Triynko 6 April 2011 в 14:56
поделиться