CSS @counter-style with Emojis

21 March 2024

Updated: 08 April 2024

The CSS @counter-style rule is used for defining list-styles in CSS

The syntax is pretty simple:

1
@counter-style <counter-style-name> {
2
  system: <cyclic|numeric|alphabetic|symblic|fixed>;
3
  symbols: <space separated list of symbols>;
4
  prefix: <content before symbol>;
5
  suffix: <content after symbol>;
6
  /* and some more options... */
7
  /* take a look at the MDN doc for all the customizations you can do, it's pretty cool */
8
}

Currently symbols just supports strings, but once fully supported it will also be possible to use images as symbols

Cyclic Counter Style

For the sake of example, I’ll be using Emojis as the symbols to display. We can define a cycle which uses some emojis like so:

css-counter-style/cyclic.css
1
@counter-style emoji-cyclic {
2
  system: cyclic;
3
  symbols: '🎈' '✨' '🎢' '🧵' '🛒' '👓' '🎨' '🛝' '🎻' '📻' '📺';
4
  suffix: '➡️';
5
}
6


7
ul.emoji-cyclic {
8
  list-style: emoji-cyclic;
9
}

Numeric Counter Style

For this example, we’ll use emoji numbers for the counter style

css-counter-style/numeric.css
1
@counter-style emoji-numeric {
2
  system: numeric;
3
  symbols: '0️⃣' '1️⃣' '2️⃣' '3️⃣' '4️⃣' '5️⃣' '6️⃣' '7️⃣' '8️⃣' '9️⃣';
4
  suffix: ' ';
5
}
6


7
ol.emoji-numeric {
8
  list-style: emoji-numeric;
9
  list-style-position: inside;
10
  padding: 0;
11
}

References