Introduction to the @counter-style feature in CSS

The feature @counter-style in CSS is one of the powerful and lesser-known tools that gives you the ability to create custom counters and lists. If you don’t want to use standard HTML counters like ol, this feature allows you to customize them exactly how you want. Keep in mind: This feature provides you with a lot of freedom to create unique list styles and use them.

In general, the structure of this feature is such that you can define a new counter and then use it in your list. Many designers often use simple counters for lists, but @counter-style gives you the ability to implement specific styles that are appropriate or relevant to your theme.

For example, let’s assume you want to create a list that uses geometric shapes instead of numbers. You can easily accomplish this with @counter-style. Here’s an example that demonstrates how this feature works in practice.

One of the attractive points of this feature is that you can use not only numbers but also letters, symbols, and even their combinations for your lists. Now let’s take a look at the following example to see how you can create a custom counter using Latin symbols.

@counter-style geometrics {
  system: cyclic;
  symbols: ■ ▲ ◆ ◉;
  suffix: " ";
}
ol {
  list-style: geometrics;
}

In this section of code:

@counter-style geometrics
We have defined a new counter named geometrics.

system: cyclic;
We set the type of the counter system to cyclic, meaning that the symbols will repeat in a cycle.

symbols: ■ ▲ ◆ ◉;
These are the symbols we want to use as list markers; we defined them here.

suffix: " ";
We defined a space as a suffix for each symbol so that we have a clean separation.

ol { list-style: geometrics; }
This style applies our defined counter to the ordered list (ol).