Custom list-styles with @counter-style (Firefox only)

by denvdmj

HTML

<a href="http://caniuse.com/#search=%40counter-style">Can I Use <b>@counter-style</b></a>

<pre>
@counter-style circled-alpha {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
  suffix: " ";
}
</pre>
<ol class="circled-alpha">
  <li>О всё видавшем Неизвестный автор XVIII—XVII вв. до н. э. Шумер / Аккад Аккадский</li>
  <li>Книга Иова Неизвестный автор VI—IV вв. до н. э. Держава Ахеменидов Иврит</li>
  <li>Тысяча и одна ночь Неизвестный автор 700—1500 Арабский халифат Арабский</li>
  <li>Сага о Ньяле Неизвестный автор XIII век Исландия Древнеисландский</li>
  <li>Божественная комедия Данте Алигьери 1265—1321 Италия Итальянский</li>
</ol>

<pre>
@counter-style cyrilic {
  system: fixed;
  symbols: а б в г д е ж з и к л м н о п р с т у ф х ц ч ш щ э ю я;
  suffix: ") ";
  font-size: 30px;
}
</pre>

<ol class="cyrilic">
  <li>О всё видавшем Неизвестный автор XVIII—XVII вв. до н. э. Шумер / Аккад Аккадский</li>
  <li>Книга Иова Неизвестный автор VI—IV вв. до н. э. Держава Ахеменидов Иврит</li>
  <li>Тысяча и одна ночь Неизвестный автор 700—1500 Арабский халифат Арабский</li>
  <li>Сага о Ньяле Неизвестный автор XIII век Исландия Древнеисландский</li>
  <li>Божественная комедия Данте Алигьери 1265—1321 Италия Итальянский</li>
  <li>Сказки Ханс Кристиан Андерсен 1835—1837 Дания Датский</li>
  <li>И пришло разрушение Чинуа Ачебе 1958 Нигерия Английский</li>
  <li>Отец Горио Оноре де Бальзак 1835 Франция Французский</li>
  <li>Трилогия (Моллой, Мэлон умирает, Безымянный) Сэмюэл Беккет 1951—1953 Ирландия Французский, английский</li>
  <li>Декамерон Джованни Боккаччо 1349—1353 Италия Итальянский</li>
  <li>Вымыслы Хорхе Луис Борхес 1944—1986 Аргентина Испанский</li>
  <li>Грозовой перевал Эмили Бронте 1847 Великобритания Английский</li>
  <li>Рамаяна Вальмики III в. до н. э. — III в. н. э. Индия Санскрит</li>
  <li>Энеида Вергилий 29—19 до н. э. Римская империя Классическая латынь</li>
  <li>Миссис Дэллоуэй Вирджиния Вулф 1925 Великобритания...

CSS

@import url(https://be5invis.github.io/Iosevka/fonts.css);

:root {
  font: 14.5px/1.375 Lato, Roboto;
  background: #fff;
  color: #000;
  margin: 2rem;
}

body {
  max-width: 40rem;
  min-width: 15rem;
  margin: auto;
}

pre {
  font-family: IosevkaWEB
}

@counter-style cyrilic {
  system: fixed;
  symbols: а б в г д е ж з и к л м н о п р с т у ф х ц ч ш щ э ю я;
  suffix: ") ";
  font-size: 30px;
}

@counter-style circled-alpha {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
  suffix: " ";
}

.circled-alpha {
  list-style: circled-alpha;
}

.cyrilic {
  list-style: cyrilic;
}