Here we will see How to show Ordered Lists With A Different Color For Numbers :


<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

2. CSS

/* Tell the 
<li> to not display numbers, but keep track of what the numbers should be */
ol li {
  counter-increment: list;
  list-style-type: none;
  position: relative;
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
ol li:before {
  color: #e75204;
  content: counter(list) ".";
  position: absolute;
  text-align: right;
  width: 26px;

3. Result

There are currently no comments.