CSS @counter-style Demo

Select a counter style from the list

cyclic fixed symbolic alphabetic numeric additive extends Numeric ▼ decimal decimal-leading-zero arabic-indic armenian upper-armenian lower-armenian bengali cambodian khmer cjk-decimal devanagari georgian gujarati gurmukhi hebrew kannada lao malayalam mongolian myanmar oriya persian lower-roman upper-roman telugu thai tibetan lower-alpha upper-alpha Alphabetic ▼ lower-alpha lower-latin upper-alpha upper-latin cjk-earthly-branch cjk-heavenly-stem lower-greek hiragana hiragana-iroha katakana katakana-iroha Symbolic ▼ disc circle square disclosure-open disclosure-closed Predefined complex styles ▼ japanese-informal japanese-formal korean-hangul-formal korean-hanja-informal korean-hanja-formal simp-chinese-informal simp-chinese-formal trad-chinese-informal trad-chinese-formal cjk-ideographic ethiopic-numeric

@counter-style blacknwhite {
  system: cyclic;
  symbols: ◆ ◇;
  suffix: " ";
}

ul {
  list-style: blacknwhite;
}