How to change ordered list number style 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.

Change ordered list number style using CSS

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

Method 1: By using span tag
Method 2: Changing default the content of the order list 

Method 1: By using 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>

Method 2: Changing default the 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>

You can modify it in a huge number of ways.