Change ordered list number style on your website using CSS

To make a great user experience you should make a change to your order list number style along with some other UI design because it is looking not so good by default.

Different ways to organize ordered list number style (<ol>)

1: By using a span tag

You can simply change ol number style just using span tag.

CSS:

ol li {
    list-style-type: decimal-leading-zero;
    color: #ff5e13;
    font-weight: 500;
    line-height: 1.82em !important;
}
ol li span {
  font-weight: 500;
  color: black;
}

HTML:

<ol>
  <li><span>Order List style 1</span></li>
  <li><span>Order List style 2</span></li>
  <li><span>Order List style 3</span></li>
</ol>

Result:

2: Changing the default content of the order list

It is a little bit of an advanced method to customize order list number style, where you can alter default content.

CSS:

ol{
list-style:none;
counter-reset:li;
}
ol li{
position: relative;
}
ol li:before {
content: counter(li);
top: 5px;
margin-left:-25px;
border-radius:3px; 
counter-increment:li; 
background:#02ad83; 
color:white;
position:absolute; 
width:16px; border:1px solid #02ad83; 
height:16px; 
text-align: center; 
font-size:15px;
line-height: 13px;  
font-weight:500;
  }

HTML:

<ol>
  <li>Order List style 1</li>
  <li>Order List style 2</li>
  <li>Order List style 3</li>
</ol>

Result:

You can modify the order list number style in a huge number of ways.