Custom list-styles with li[value="custom"]

by denvdmj

HTML

<h1>Нумерованные списки заданные русскими буквами</h1>

<p>Русские буквы — буквы ё, й, ъ, ы, ь в нумерованных списках пропускаются.
<a href="https://ru.wikipedia.org/wiki/Список_(типографика)#.D0.9D.D1.83.D0.BC.D0.B5.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.BD.D1.8B.D0.B5_.D1.81.D0.BF.D0.B8.D1.81.D0.BA.D0.B8">Нумерованные списки</a></p>

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

CSS

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

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

ol[type="value"] > li {
  list-style-type: none;
  position: relative;
}
ol[type="value"] > li::before {
  position: absolute;
  width: 2em;
  left: -2.25em;
  text-align: right;
  display: inline-block;
  content: attr(value) ")";
}