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:

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

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 7
Item 8
Item 9
Item 10

Numeric Counter Style

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

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
}

Item 1
Item 2
Item 3
Item 4
Item 5

Item 11
Item 12
Item 13
Item 14
Item 15

Item 111
Item 112
Item 113
Item 114
Item 115

CSS @counter-style with Emojis

Cyclic Counter Style

Numeric Counter Style

References