3

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

 1 month ago
source link: https://www.geeksforgeeks.org/how-to-customize-the-numbers-of-an-ordered-list-using-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

<!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:

24062022160157REC.png

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

<!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>

Output:

24062022161615REC.png

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK