How to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS?

Spread the love

Sometimes, we want to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS.

In this article, we’ll look at how to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS.

How to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS?

To fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS, we set the content property.

For instance, we write

<ol>
  <li>one</li>
  <li>
    two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>
    three
    <ol>
      <li>three.one</li>
      <li>
        three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

to add the ordered list.

Then we write

ol {
  counter-reset: item;
}

li {
  display: block;
}

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

to add content: counters(item, ".") " "; to add the numbers for the nested list items.

Conclusion

To fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS, we set the content property.

Leave a Reply

Your email address will not be published. Required fields are marked *