How to style ordered list numbers with CSS?

Spread the love

Sometimes, we want to style ordered list numbers with CSS.

In this article, we’ll look at how to style ordered list numbers with CSS.

How to style ordered list numbers with CSS?

To style ordered list numbers with CSS, we use the :marker pseudoelement.

For instance, we write

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

to add an ordered list.

Then we write

li::marker {
  color: red;
}

li {
  color: blue;
}

to select the marker of each li with :marker and make its text color red.

Conclusion

To style ordered list numbers with CSS, we use the :marker pseudoelement.

Leave a Reply

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