CODEWITHSUNDEEP
csstailwind-csscss-counter
roye7777777
roye7777777

Reputation: 418

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

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.

Upvotes: 2

Views: 1211

Answers (2)

anry_iron
anry_iron

Reputation: 1

try this syntax class="[content:counters(section'.')]". without a comma after 'section'. But it will break lists counting inside, and will start from 1, 2, 3...

Upvotes: 0

Eren
Eren

Reputation: 36

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

Upvotes: 1

Related Questions