How Can I Create Custom Numbered Lists (e.g., 1.1, 1.2, 1.3) with CSS?

Custom Numbering in Ordered Lists with CSS

Can ordered lists be styled to display numbers as 1.1, 1.2, 1.3, instead of just 1, 2, 3?

The list-style-type property doesn't offer direct control over sub-numbering. However, there's a clever solution using CSS counters:

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

This approach sets a counter for each list item, which is incremented with each nested item. The counters(item, ".") function formats the counter as a number with a dot separator.

To illustrate, consider this HTML markup:

<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 style would result in the following list:

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

This technique provides a flexible way to customize the numbering of ordered lists, allowing for more complex and hierarchical lists with custom separators and numbering schemes.

The above is the detailed content of How Can I Create Custom Numbered Lists (e.g., 1.1, 1.2, 1.3) with CSS?. For more information, please follow other related articles on the PHP Chinese website!