How to Create Decimal Numbered Ordered Lists with CSS Counters?

Ordering Lists with Decimal Numbers and CSS

In an ordered list, you may encounter the need to display numbers in a specific format, such as 1.1, 1.2, 1.3, instead of the default sequence of 1, 2, 3. While using list-style-type:decimal only numbers list items sequentially, it is possible to achieve the desired numbering format using CSS counters.

Solution: Using Counters

Counters allow you to manipulate the numeric value displayed for list items. Here's the CSS code to create a hierarchical numbering system:

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

Example

Consider the following HTML structure:

<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>

Applying the CSS code above, the output will be:

1. li element
   1.1 sub li element
   1.2 sub li element
   1.3 sub li element
2. li element
3. li element
   3.1 sub li element
   3.2 sub li element
   3.3 sub li element

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