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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想要这个HTML …

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

…像这样渲染

Q1。苹果

Q2。橘子

换句话说，我希望自动生成的数字以静态字符串“ Q”为前缀。

我试过这样的CSS：

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

但这产生了：

  1. 苹果

  2. 橙子

我也尝试过使用“ list-style：numberedinside;”，但这只是将列表右移，结果相同。我找不到以任何方式引用自动生成的数字元素来向其添加CSS样式信息的方法。这似乎是一个简单，常见的场景，但是我找不到任何简单的CSS（没有CSS计数器，JavaScript等）来完成它的方法。

回答：

唯一的纯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。

以上是 如何使用CSS在带有静态字符串的序列表项编号前添加前缀？ 的全部内容， 来源链接： utcz.com/qa/408146.html

回到顶部