В CSS нумерованный список может быть с латинскими и греческими буквами, также с цифрами вкл. римские. Но вот как сделать список с русскими буквами - а) б) в) г) д) е) и т.д. ? - читайте далее:
Это делается через стили CSS 3
HTML:
<ol class="cyrilic"> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol>
В данном случае можно использовать как и <ol> так и <ul> ведь нумерацию мы принудительно выставим сами с помощью псевдоэлемента ::before и свойства content. Но т.к. в каждой строке должна быть своя буква, используем псевдокласс :nth-child(1), в скобках пишем номер буквы.
CSS 3:
.cyrilic li:nth-child(1)::before { content: 'а)'; } .cyrilic li:nth-child(2)::before { content: 'б)'; } .cyrilic li:nth-child(3)::before { content: 'в)'; } .cyrilic li:nth-child(4)::before { content: 'г)'; } .cyrilic li:nth-child(5)::before { content: 'д)'; } .cyrilic li:nth-child(6)::before { content: 'и)'; } .cyrilic li:nth-child(7)::before { content: 'к)'; } .cyrilic li:nth-child(8)::before { content: 'л)'; }
и т.д.
Преимущества
Плюсов у данного метода очень много,
1) можно использовать буквы любого алфавита и любые символы вкл. символы utf-8. Также мы сами решаем, включать в список буквы, такие как Ё и Й, или нет.
2) Вид нумерации и оформление букв устанавливается через CSS.
3) Список легко расширить по аналогии и сделать вложенные списки.
4) Можно сделать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой, написав этот код в css файл шаблона.
Поддержка браузеров
Эта технология CSS 3, поэтому старые браузеры вроде IE8 ее не поддерживают. Слава Богу, что уже не нужно писать отдельные строки под IE, а если что и отображается плохо, то это проблема юзера, который использует IE.
В Internet Explorer 9 это уже работает. В остальных нормальных браузерах все хорошо работает, так же как и в iPhone и Android системах.