CSS @counter-style with Emojis

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

The syntax is pretty simple:

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

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.html

<ul class="emoji-cyclic">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>

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

css-counter-style/numeric.html

<div>
  <ol class="emoji-numeric">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ol>
  <ol class="emoji-numeric" start="11">
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
  </ol>
  <ol class="emoji-numeric" start="111">
    <li>Item 111</li>
    <li>Item 112</li>
    <li>Item 113</li>
    <li>Item 114</li>
    <li>Item 115</li>
  </ol>
</div>

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