Introduction to @counter-style in CSS
The @counter-style rule in CSS is used to define custom counter styles for ordered lists. This feature allows you to define unique styles for displaying lists instead of using the default numeric or alphabetical styles. This feature is particularly useful in designing user interfaces with a distinct aesthetic.
One of the attractive capabilities of this feature is the ability to define a replacement or fallback. If the browser is unable to render the specified style, it will utilize the fallback style instead. This ensures that your lists always appear appropriately styled.
Using @counter-style and Defining Fallback
To use @counter-style, you first need to define your style and then apply it in the relevant CSS rules for your list. Now, let's get acquainted with a simple example.
<style>
@counter-style custom-counter {
system: numeric;
symbols: "g" "ch" "p" "j";
fallback: disc;
}
ol {
list-style: custom-counter;
}
</style>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Step-by-Step Explanation
<style>This tag begins the CSS style section where we define our custom counter style.
@counter-style custom-counterThis rule is used to define a new custom counter style named
custom-counter.system: numericThis property indicates that the counter style will use a numeric system.
symbols: "g" "ch" "p" "j";This line specifies the symbols that will be used for the items in the list, allowing for a custom definition.
fallback: disc;This property defines that if the browser cannot render the specified counter style, it will use
disc for list items.olThis line indicates that for ordered list items (where we have previously defined the counter style), we will use this custom style.
<li>This element within the list signifies a single item from our list.