Search code examples
csscss-counter

Is there a CSS counter equivalent for list-style-type?

CSS has a nice collection of values for list-style-type, Is there a way to use them as the value of content: counter(steps)?

I want to use list-style-type: persian in counter value.

Result would be:

۱ // (one)
۲ // (two)
۳ // (three)
۴ // (four)
۵ // (five)
...
Solution

  • Yes, the counter() function takes the style type as a parameter. The syntax is as given below:

    counter() = counter( <ident> [, [ <counter-style> | none ] ]? )

    body {
  counter-reset: divs;
}
div {
  counter-increment: divs;
}
div:before {
  content: counter(divs, persian);
}
    <div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>