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

Note: Use CSS counters to create nested numbering in a modern browser. See the accepted answer. The following is for historical interest only.

---

If the browser supports content and counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

  
uno
  
dos
  
tres
  
cuatro