Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?

Question

Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimal has produced on

Answer 1

In the near future you may be able to use the ::marker psuedo-element to achieve the same result as other solutions in just one line of code.

Remember to check the Browser Compatibility Table as this is still an experimental technology. At the moment of writing only Firefox and Firefox for Android, starting from version 68, support this.

Here is a snippet that will render correctly if tried in a compatible browser:

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

  
li element
    

      
sub li element
      
sub li element
      
sub li element
    
  
  
li element
  
li element
    

      
sub li element
      
sub li element
      
sub li element
    
  

You may also want to check out this great article by smashingmagazine on the topic.