Записки HTML-верстальщика: делаем правильные нумерованные списки (CSS Only)
Здрасте всем!
У всех начинающих верстальщиков (и не только) 100% возникала проблема с тем, чтобы стилизовать порядковые номера в нумерованном списке каким-нибудь отдельным стилем.
Но тут возникала проблема: в стандартных нумерованных списках нельзя отделить стилями цифры счётчика от текста, идущего после них:
Решение: самым первым делом, нам нужно избавиться от стандартного счетчика списка. Это делается легко, свойством для li {list-style:none;}. Затем, самый простой способ - это добавить перед текстом какой-нибудь <span> и в каждом элементе ставить числа 1,2,3,4...и.т.д.
Но!!! Чаще всего (и это правильно) нужно сделать так, чтобы наш нумерованный список увеличивал число перед текстом автоматически. Это можно сделать на чистом CSS!! В этом помогут нам счётчики CSS. Для нашей задачи достаточно для ol указать свойство {counter-reset: myCounter;} - мы определяем переменную (да-да! Переменную в CSS) myCounter, и сбрасываем её значение. Затем, при помощи этой переменной и псевдоэлементов мы добавляем счетчик перед нашим списком: li:before { counter-increment: myCounter; content:counter(myCounter);} - counter-increment: здесь мы указываем значение переменной, которое будет увеличиваться, ну и content:counter(myCounter) - это контент, который будет отображаться в псевдоэлементе :before.
Пример того, что может получиться, Вы можете посмотреть тут:
Мы получили очень даже кроссбраузерный список, в котором элементы автоматически получают свою нумерацию, которую можно стилизовать как вам заблагорассудится. Таким же образом можно создавать вложенные друг в друга списки. А изучив синтаксис свойства counter-increment, начинать список не с первого элемента, выводить четные/нечетные номера элементов и т.д.