📄 Defining Custom List Styles with @counter-style

#css #counterStyle

We often use ordered and unordered lists in HTML documents. For customizing them, standard browsers offer various inbuilt list marker types via the list-style-type CSS property. You can extend these list styles or implement custom styles from scratch with the @counter-style at-rule.

Look at the following CSS code snippet:

@counter-style emojis {
  system: cyclic;
  symbols: 🔴 🟠 🟢;
  suffix: ' ';
}

ul li {
  list-style-type: emojis;
}

Moreover, it’s possible to customize existing inbuilt list styles with this at-rule:

 @counter-style decimal-mod {
  system: extends decimal;
  prefix: '( ';
  suffix: ' ): ';
  pad: 2 '0';
}


ol li {
  list-style-type: decimal-mod;
  margin-bottom: 2px;
}

ol li::marker {
  color: #780794;
}

The above CSS definition extends the default decimal list style by adding a prefix, suffix, and zero-padding.