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.

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.

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