- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use @counter-style rule to customize list item using CSS?
Lists are a fundamental part of web development and are used to present information in an organized and structured way. In HTML, there are 3 types of lists: ordered lists, unordered lists, and definition lists. However, styling these lists can be challenging when we need to design it according to our requirements. CSS provides us with the @counter-style rule, which allows us to customize list item markers in a more flexible and creative way.
In this article, we will learn how to use the @counter-style rule to customize list items using CSS. The @counter-style rules are used in defining the counter styles that are not part of the predefined set of styles and it also defines how to convert a counter value into a string representation.
What is @counter-style?
The @counter-style rule is used to define a counter style that can be used in conjunction with the CSS counter property. This rule is used to define a custom list item marker style. The counter property allows us to increment or decrement a counter, which is used to generate content for pseudo-elements like :before and :after.
Syntax
@counter-style name {
// write all the CSS styles properties and values
}
The name parameter is used to specify the name of the counter style that we are defining. Within the curly braces, we can define a set of properties and values that control the appearance of the counter. Some of the properties that we can use include −
System − It specifies the numbering system to use like a decimal, lower-alpha, upper-roman, etc.
Symbols − It specifies the symbols to use for each level of the counter.
Suffix − It specifies the suffix to add after the counter value.
Prefix − It specifies the prefix to add before the counter value.
Pad − It specifies the minimum number of digits to use when displaying the counter value.
Steps to use @counter-styles Rule in CSS
Below are the steps to use @counter-styles rule in CSS −
Step 1: Create an Ordered List
The first step is to create an ordered list and customize it with our own list item markers. In the below example, we want to use Roman numerals instead of the default numbering system. Here's the HTML code for our list −
<ol> <li>Learn to code in python</li> <li>Learn to code in java</li> <li>Learn to code in c++</li> </ol>
Step 2: Define the @counter-style
@counter-style my-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
In the above code, we have defined a counter style named my-numerals and set the system property to upper-roman which means the counter will be set to use the uppercase Roman numerals in the list. Apart from this, we have also set the symbol's property to a string of Roman numerals from I to X.
Step 3: CSS Styles
ol {
counter-reset: section;
}
li {
counter-increment: section;
list-style: none;
}
li:before {
content: counter(section, my-numerals) ". ";
margin-right: 10px;
}
In the above code, the counter-reset property is set to the section for the ol element which further means that the counter will start from 0. Here, we have also set the counter-increment property to the section for each li element.
Example 1
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* Defining a custom counter style to have the list as upper roman numerals */
@counter-style roman-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
/* applying the custom counter style to the ordered list */
ol {counter-reset: section; }
/* incrementing the counter for each list item */
li {counter-increment: section; list-style: none;}
/* using the counter value to display the custom list item marker */
li:before {
content: counter(section, roman-numerals) ". ";
margin-right: 8px;
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
In the example above, we have defined a custom counter style named my-roman using the @counter-style rule. Here, we have set the system property to upper-roman to use the uppercase Roman numerals and also set the symbol's property to a string of Roman numerals from I to X.
After that, we have then applied the custom counter style to the ordered list using the counter-reset property and also incremented the counter for each list item using the counter-increment property and removed the default list item marker using the list-style property.
Finally, to display the custom list item markers with roman numerals we have used the :before pseudo-element using the content property and the counter function (having two parameters: the name of the counter (section in this case) and the name of the counter style (roman-numerals in this case)).
Example 2
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* removing the default list item markers */
ul { list-style: none;}
/* using images as list item markers */
li:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background-image: url("yourimage.png");
background-repeat: no-repeat;
margin-right: 8px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
In the example above, we have removed the default list item markers with the help of the list-style property to the unordered list element. Also, we have used the :before pseudo-element for displaying the list item with the help of the content property and an empty string.
We have set the display property to inline-block to ensure that the images display correctly, and we have set the width and height properties to the size of our marker images. We have used the background-image property to specify the URL of the marker image and the background-repeat property to prevent the image from repeating. Finally, we have added some margin to the right of the image using the margin-right property.
Conclusion
When working with HTML lists, customizing the appearance of list item markers can be achieved with CSS using the @counter-style rule. This rule provides a simple and flexible way to define custom styles for list item markers, particularly for ordered lists. The syntax of the @counter-style rule includes several parameters such as system, symbols, suffix, prefix, and pad. These parameters allow for modifications to be made to the appearance of the list item markers. Using the @counter-style rule, it becomes very easier to create list item markers to match the design needs of the project at hand.
74 Views
