23

我想要这个 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 等）来完成它。

4

3 回答 3

44

唯一的纯 CSS 方式是使用counters：

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

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

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

顺便说一句，它是decimal，不是numbered。

于 2011-04-06T14:43:30.440 回答
3

有一种易碎的非计数器方法，但它很容易损坏：

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 小提琴演示。

于 2011-04-06T14:57:11.353 回答
1

鉴于此 HTML：

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

您可以 (1) 使用@counter-styleCSS at-rule：

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

ol.q {
  list-style: q;
}

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

ol.q {
  counter-reset: q;
}

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

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

无论哪种方式，您都可以通过CSS 速记属性将list-style-positionCSS属性设置为该值，以使呈现的 HTML 看起来像BoltClock 的答案。list-styleinside

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

于 2021-08-07T17:03:54.150 回答