Can CSS Counters Create Numbered Lists with Decimal Points?

Creating Numbered Lists with Decimal Points

Can CSS be used to generate numbered lists with decimal points, such as 1.1, 1.2, and 1.3, rather than just 1, 2, and 3? Applying list-style-type:decimal only produces the latter sequence.

Solution: Utilizing Counters

To achieve the desired result, counters can be employed:

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

This CSS style sheet assigns each nested list item a number with decimal points. For instance, "1", "1.1", "1.1.1", and so on.

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>

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