英文:

How does one add something as a dot after a counter inside a content property in TailwindCSS?

问题 {#heading}

1. 我有这个编号列表（为了可读性，我省略了counter-reset和counter-increment）：

   1. 我喜欢奶酪

这将产生：

1我喜欢奶酪

我想在计数器后面添加句点和空格，使其变成：

1. 我喜欢奶酪

但是框架不允许我解析通常在纯CSS中正常工作的内容：

content: counter(name) '.';

如何绕过这个问题，而不必手动添加硬编码的类？或者，是否有一种适当的方法来处理这个问题，通过创建一个特定的插件来接受类似的值？

编辑：我现在意识到确实存在list-decimal，它也可以做到这一点，但我特别想知道如果仍然在before中使用CSS计数器，是否有一个有效的替代方法？ 英文:

I have this numbered list (I have omitted the counter-reset and counter-increment for legibility):

<ol class="...">
    <li class="... before:content-[counter(name)]">I like cheese</li>
</ol>

which results in

1I like cheese

I would like to add a period and a space after the counter, so it becomes:

1. I like cheese

but the framework won't let me parse something that normally would work in vanilla CSS:

content: counter(name) '. ';

How do I work around this without having to add a hard-coded class myself? Or perhaps, is there a proper way of handling this, by making a particular plugin that would accept a similar value?

Edit: I now realize there indeed is something as list-decimal which exactly does this too, but I am specifically curious about a working alternative if one would still use a CSS-counter in a before.

答案1 {#1}

得分: 1

1. 项目
2. 项目
3. 项目
4. 项目

我认为这是你想要做的事情。

链接：https://flowbite.com/docs/typography/lists/ 英文:

<ol class="list-decimal list-inside">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

i think this is what you are trying to do.

https://flowbite.com/docs/typography/lists/