Ни для кого не секрет, что с помощью CSS свойств list-style можно задать стиль маркеров у маркированного списка. С нумерованными списками не все так просто. Как известно до маркеров в нумерованных списках никак не «доберешься» с помощью правил CSS.
Конечно, можно отображать номера элементов в виде римских цифр или букв латинского алфавита (устанавливая различные значения атрибута type элемента ol или значение свойства list-style-type), но увеличить их размер или поменять
цвет стандартными правилами CSS невозможно. В связи с этим, речь в этой заметке пойдет об оформлении нумерованных списков, а именно о замене стандартных маркеров у элементов таких списков.
При стилизации нумерованных списков разработчики поступают следующим образом:
- скрывают маркеры по-умолчанию
- инициализируют новый счетчик
- размещают его значение в псевдоэлементе
:before у каждого элемента списка.
- значение счетчика рассчитывается для каждого элемента списка
В итоге получается следующий CSS-код:
CSS
ol {counter-reset: li;} /*ID счетчика*/
ol li {list-style-type:none;} /*скрываем маркеры по-умолчанию*/
ol > li:before {
content: counter(li, decimal); /*вставляем значение счетчика в :before*/
counter-increment: li; /*рассчитываем значение счетчика*/
}
Остальные стили, которые применяются к элементам списка, зависят от дизайн-макета сайта.
Например, если список в макете выглядит как на рисунке выше, то нужно будет применить следующие стили:
CSS
li{border-bottom: 1px solid #f6d000; float: left; font-size: 18px; line-height: 30px; margin: 0 50px 25px; min-height: 110px; padding-top: 70px; position: relative; width: 400px; z-index: 10; color:#777;}
li:before {bottom: 0; color: #f6d000; font-size: 150px; font-weight: 100; line-height: 189px; position: absolute; right: -12px; z-index: -1;}
Перечисленные в заметке CSS-правила (counter-reset, content, counter-increment) поддерживаются всеми современными браузерами. В IE работает начиная с восьмой версии.
Демо-страница с примером из заметки
