英文:
How does one add something as a dot after a counter inside a content property in TailwindCSS?
问题
- 我有这个编号列表（为了可读性，我省略了counter-reset和counter-increment）：
<ol class="...">
<li class="... before:content-[counter(name)]">我喜欢奶酪</li>
</ol>
这将产生：
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
- 项目
- 项目
- 项目
- 项目
我认为这是你想要做的事情。
链接：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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论