How to customize the numbers of an ordered list using CSS ?
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 >w3wiki</ 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 >w3wiki</ li > < li >Computer Science</ li > < li >CSS</ li > < li >HTML</ li > </ ol > </ body > </ html > |
Output: