如何使用 CSS 为有序列表项编号添加静态字符串前缀？

我想要这个 HTML：

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

像这样渲染：

Q1.苹果
Q2。橙子

即，我想在每个数字前加上“Q”前缀。

我试过这样的CSS：

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

但呈现如下：

1.Q苹果
2.Q橙子

我也尝试过使用list-style: numbered inside;，但这只是将列表向右移动，结果相同。我找不到任何方法来引用这些数字以便使用 CSS 设置它们的样式。这看起来是一个简单、常见的场景，但我找不到任何方法用简单的 CSS 来完成它（没有 CSS 计数器、JavaScript 等）。

唯一的纯 CSS 方法是counters http://www.w3.org/TR/CSS21/generate.html#counters:

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

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

除了使用 CSS 计数器（专门为此类用例设计！）或 JavaScript 之外，您无法实现此目的。

顺便一提，it's decimal, not numbered http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type.