2

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.

roye7777777
  • 394
  • 1
  • 2
  • 13

1 Answers1

1
<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/

Eren
  • 36
  • 6
  • 1
    Admitted: this does indeed exactly create a number (in a native way) and adds a period. I'm afraid however that I failed to formulate the question specifically enough to describe what I am actually curious about, which is: what would I do if I _do_ want to use a counter, where I could hypothetically replace the dot with anything, such as a colon or a hyphen? – roye7777777 Aug 10 '23 at 15:20