Introduction to @counter-style in CSS

@counter-style is one of the attractive and less recognized features in CSS that allows us to define custom numbering styles for lists and other elements. This feature gives us great flexibility to define various custom numbering styles for web projects and to add unique visual elements.

Assuming you have a project that requires custom numbering styles that do not exist in predefined formats. With the help of @counter-style, you can easily create new and unique styles and use them in your projects. However, it's worth noting that this feature is not supported in all browsers and utilizing it requires familiarity with the specifications.

Defining a new custom numbering format can help you create lists that are visually appealing and congruent with your design budget. You might want to utilize Arabic numerals, specific Persian letters, or even an emoji set!

In other words, using @counter-style can provide endless possibilities for creativity in designing and developing your unique websites. However, it is better to start with a practical example of how to set up a new numbering style.

@counter-style emojiStyle {
  system: cyclic;
  symbols: "😀" "😂" "😅" "😁";
  suffix: " ";
}

ul.custom-list {
  list-style: emojiStyle;
}

@counter-style emojiStyle: Here, we are defining a new custom numbering style named emojiStyle.

system: cyclic;: This specifies that our numbering style will be cyclical in nature.

symbols: "😀" "😂" "😅" "😁";: This line indicates which symbols will be used for each item. We are using several emojis here, but you can replace them with any symbols you wish.

suffix: " ";: This specifies what should be added after each symbol. In this example, we added a space.

ul.custom-list: This is a CSS class for a custom list that we will apply the new numbering style to.

list-style: emojiStyle;: This indicates that this list should use the custom numbering style emojiStyle.