How to customize the numbers of an ordered list using CSS ?

Last Updated : 10 Jul, 2022

In this article, we will learn how to customize (decorate) the numbers in an ordered list. We use counter-increment property to decorate the numbers.

Approach: It is difficult to add CSS styles to <ol> elements directly to customize the numbers. Instead, we access the range of the ordered list and set the CSS list-style to “none” so that the regular ordering is invisible. After knowing the range, we set the counter-increment property to order the list and add CSS properties to style the numbers using other CSS properties.

The below example demonstrates the above approach.

Example 1: In this example, we will change the color of the numbers using the counter-increment and counter-reset properties. In this example, numbers from 1 to 4 are incremented and the color is set to “green”. We can style the numbers as per our requirements by adding CSS properties.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Customize numbers in ordered list</title> 
    <style> 
        ol { 
            list-style: none; 
            counter-reset: num; 
        } 
  
        ol li { 
            counter-increment: num; 
        } 
  
        ol li::before { 
            content: counter(num) ". "; 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <ol> 
        <li>GeeksforGeeks</li> 
        <li>Computer Science</li> 
        <li>CSS</li> 
        <li>HTML</li> 
    </ol> 
</body> 
  
</html>

Output:

Example 2: In this example, we have followed the same approach, some more styling properties are added to the same HTML file.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Customizing numbers in ordered list</title> 
    <style> 
        ol { 
            list-style: none; 
            counter-reset: num; 
        } 
  
        ol li { 
            counter-increment: num; 
            font-size: 20px; 
        } 
  
        ol li::before { 
            content: "0" counter(num); 
            font-weight: bold; 
            color: green; 
            font-family: 'Segoe UI', Tahoma, Geneva,  
                  Verdana, sans-serif; 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <ol> 
        <li>GeeksforGeeks</li> 
        <li>Computer Science</li> 
        <li>CSS</li> 
        <li>HTML</li> 
    </ol> 
</body> 
  
</html>