如何使用 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. Q苹果
2.Q橙子

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

Answer 1

唯一的纯 CSS 方法是使用 计数器：

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

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

除了使用CSS 计数器（专为此类用例设计！）或 JavaScript。

顺便说一下，它是十进制 ，而不是编号。

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演示。

Answer 3

鉴于此 HTML：

<ol class="q">
  <li>Apples</li>
  <li>Oranges</li>
</ol>

您可以 (1) 使用 @counter-style CSS at-rule：（

@counter-style q {
  system: extends decimal;
  prefix: "Q";
}

ol.q {
  list-style: q;
}

参见W3C：CSS 计数器样式级别 3：3.1.7. 从现有计数器样式构建：扩展系统。）或 (2) 使用 CSS 计数器 和 ::marker CSS 伪元素：

ol.q {
  counter-reset: q;
}

ol.q > li {
  counter-increment: q;
}

ol.q > li::marker {
  content: "Q" counter(q) ". ";
}

无论哪种方式，您都可以设置 list-style-position CSS 属性 通过 list-style CSS速记属性到值inside，以使渲染的HTML看起来像BoltClock的答案。

HTML 编辑：我删除了 style="list-style:decimal;" 因为我认为这是 ol 元素的默认设置。我添加了 class="q" 以便样式仅适用于特定列表。我将每个 li 元素缩进两个空格，因为我更喜欢这种样式。