How Can CSS Counters Create Decimal Numbering in Nested Ordered Lists?

Using CSS to Create Nested Ordered Lists with Decimal Numbering

Ordered lists typically display numbers like 1, 2, 3 sequentially. However, how can CSS be used to produce more specific numbering like 1.1, 1.2, 1.3, and so on?

Using list-style-type:decimal alone only yields basic numeric values. To create the desired hierarchical numbering, counters can be employed.

The following code snippet demonstrates how to use counters:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Here's an example:

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

With this CSS applied, the resulting ordered list will display numbers like 1.1, 1.1.1, 1.2, 1.3, and so on, representing the nested hierarchy of list elements.

The above is the detailed content of How Can CSS Counters Create Decimal Numbering in Nested Ordered Lists?. For more information, please follow other related articles on the PHP Chinese website!