如何使用CSS对带有静态字符串的有序列表项编号进行前缀处理？ [英] How can I prefix ordered list item numbers with a static string using CSS?

问题描述

我想要此HTML ...

I want this HTML...

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

...以这样的形式呈现

...to render like this

Q1。苹果

Q2。 Oranges

Q1. Apples
Q2. Oranges

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

In other words, I want the auto-generated numbers to be prefixed with the static string "Q".

我尝试过这样的CSS：

I've tried CSS like this:

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

但是这产生了：

1. QApples


2. QOranges

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

I've also tried using "list-style:numbered inside;", but that just shifts the list to the right with the same results. I can't find a way to reference the auto-generated number elements in any way to add CSS styling information to them. This seems like such a simple, common scenario, yet I can't find any way to accomplish it with straightforward CSS (without CSS counters, JavaScript, etc.).

推荐答案

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

The only pure CSS way is with counters:

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

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

除了使用CSS计数器

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

By the way, it's decimal, not numbered.

这篇关于如何使用CSS对带有静态字符串的有序列表项编号进行前缀处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！