How to use @counter-style rule to customize list item using CSS ?

Last Updated : 04 Jan, 2023

In this article, we will see how the @counter-style rule can be used to customize each list item style in CSS. Most of the cases while developing web applications and web projects, we often make use of lists, i.e., an ordered list or unordered list, or a description list. Although, there exist some restrictions on the pre-defined list, i.e., we can style the list as numbers, alphabets, and roman numbers when we use an ordered list, whereas disc, circle square when we use an unordered list. If we need to style each list item with some random symbols, other than styling them traditionally, then we can make use of the CSS styling rule @counter-style. The @counter-style CSS at-rule helps to create counter styles that are not part of the predefined set of list styles. It helps to define the transformation of the counter value into a string representation. The @counter-style rule addresses this deficiency openly by allowing authors to define their own counter-styles if they are not satisfied with the use of predefined styles. We can define the @counter-style rule using the following descriptors/properties in the CSS file.

Syntax:

@counter-style <counter_style_name> {
    system: <system_type>;
    symbols: " " " " " ";
    suffix: "";
}

Where,

System: It specifies the formula to be used for changing the number of a counter to a string representation. It is used to define the way in which the list should be displayed. For eg: you can set values of the system to cyclic, alphabetic, numeric, fixed, or symbolic.
Symbols: They are used to specify the style of the marker that is the list item styles. They can contain custom identifiers, images, or strings.
Suffix: The name of the property itself defines itself in that it is used to concatenate a certain string at the end of the symbol. Generally, we use an empty string ‘ ‘ which adds a space.

Approach: In order to customize the counter list style, we have to define the @counter-style and assign it to the ordered list style. After defining the counter-style, we have to assign this defined style to the ordered list style using the defined style name.

Example 1: This example describes the use of the @counter-style rule to customize the style for each list item. Here, we have used the ordered list & we have <counter_style_name> as gfg-style and the system is declared as cyclic, so the symbols string will be used in a cyclic pattern.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Counter Style CSS</title> 
    <style> 
        @counter-style gfg-style { 
            system: cyclic; 
            symbols: '#' '$' '*'; 
            suffix: " "; 
        } 
  
        ol { 
            list-style: gfg-style; 
        } 
    </style> 
</head> 
  
<body> 
    <ol> 
        <li>Geeks</li> 
        <li>For</li> 
        <li>Geeks</li> 
        <li>CSS Counter Style</li> 
    </ol> 
</body> 
  
</html>

Output: From the output, we can see that the first symbol is repeated after the end of the last symbol in the string.

counter-style cyclic system

Example 2: In this example, we have used the unordered list, and just changed the counter-style system to fixed. So, in the output, we can observe that after the end of defined symbols, the default ordered list style followed, i.e., numeric.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Counter Style CSS</title> 
    <style> 
        @counter-style gfg-style { 
            system: fixed; 
            symbols: '#' '$' '*'; 
            suffix: " "; 
        } 
  
        ul { 
            list-style: gfg-style; 
        } 
    </style> 
</head> 
  
<body> 
    <ul> 
        <li>Geeks</li> 
        <li>For</li> 
        <li>Geeks</li> 
        <li>CSS Counter Style</li> 
    </ul> 
</body> 
  
</html>