The @counter-style at-rule defines a reusable custom list style. It names the counter, describes its behavior, and lets a list replace default bullets with a chosen symbol. section 4.2
Define the custom counter with three declarations:
- symbols selects the symbol or symbols displayed for list items. section 4.2
- system controls how the defined symbols are used; cyclic repeats the available symbol. section 4.2.4
- suffix adds the content after each counter, such as a space. section 4.2.4
- Apply the named style with list-style on the target list. section 4.2.4
Hot-beverage list markers
A custom style named emoji uses the hot-beverage symbol, repeats it cyclically, and applies it to an article's unordered list. section 4.2 section 4.2.4
Listing 4.8 Styling the list
@counter-style emoji { #1
symbols: "\2615"; #2
system: cyclic;
suffix: " ";
}
article ul {
list-style: emoji; #3
}
Inspect the complete CSS declaration and the list-style application together. section 4.2.4
