Nested css counters with leading zeros

css css-content
Jason picture Jason · Jun 7, 2012 · Viewed 10.3k times · Source

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

BoltClock picture BoltClock · Jun 7, 2012

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

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

Related questions

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More
Adding HTML entities using CSS content

How do you use the CSS content property to add HTML entities? Using something like this just prints &nbsp; to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&nbsp;'; }

Read More
CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More