css - Nested css counters with leading zeros

Question

Is it possible to combine the css counters() function with leading zeros, producing a list such as this:

Item 01
  Item 01.01
  Item 01.02
    Item 01.02.01

Leading zeros are possible using content: counter(name, decimal-leading-zero), and combining nested counters is possible using content: counters(name, ".").

I know of workarounds if the level of nesting is known (i.e. I know the list will only ever nest 3 levels deep), but does anyone know if it's possible to combine these for lists of an unknown level of nesting?

Answer 1

Yes, you can combine these — just supply the counter style as the last argument to counters():

content: counters(name, ".", decimal-leading-zero)