How to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS?

Spread the love

Sometimes, we want to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS.

In this article, we’ll look at how to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS.

How to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS?

To make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS, we set the content property.

For instance, we add a nested list with

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

Then we write

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

to add content: counters(item, ".") " "; and counter-increment: item; to make the nested list item show numbers separated with a dot.

Conclusion

To make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS, we set the content property.

Leave a Reply

Your email address will not be published.