18

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?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Jason
  • 183
  • 1
  • 1
  • 5

1 Answers1

38

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

content: counters(name, ".", decimal-leading-zero)
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    That's great, I had been staring at the spec for a while and just couldn't see it, thanks! Edit [found it now](http://www.w3.org/TR/CSS21/syndata.html#counter). – Jason Jun 07 '12 at 17:36
  • 1
    Could one control the number of leading zeros or total number of digits? Similar to `fprintf()`? – Royi Jan 10 '21 at 20:57
  • 1
    @Royi: I don't think you can with just counters() but maybe a custom counter style can. – BoltClock Jan 14 '21 at 04:59