Нумерованный список, который обозначается тегам <ol>
, в отличие от своего «старшего брата» маркированного списка <ul>
, поддается оформлению значительно труднее. Именно речь идет о счетчике, где в зависимости от параметров выводится значение порядкового типа. Это могут быть римские цифры, арабские цифры, буквы нижнего и верхнего регистра и т.д.
Чтобы задать стили нумерованному списку, мы вначале отменим значение по умолчанию через свойство list-style
. А затем сбрасываем счетчик с помощью свойства counter-reset
, указав идентификатор и начальное значение. И выведем на экран результат, использовав псевдоэлемент before
или after
.
Оформление нумерованного списка
В оформлении для примера решим пару задач, и учтем вложение списка как нумерованного, так и маркированного. Первый пример приведем самый простой и уточним принцип свойств.
HTML
<ol class="wsnumber1"> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol>
CSS
ol.wsnumber1 { display: block; counter-reset: wslist1;/*сбрасываем счетчик списка*/ color:#777; list-style: none;/*отменяем маркер по умолчанию*/ } ol.wsnumber1 > li { margin: 0 0 1em 3em; position:relative;/*позиционирование внутри элемента */ } ol.wsnumber1 > li::before { background: #674FB6; border-radius: 50%; color: #fff; content: counter(wslist1);/* вывод счетчика*/ counter-increment: wslist1;/*значение счетчика увеличиваем на один */ display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute;/*абсолютное позиционирование*/ text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; }
Пояснение: в качестве настройки места показа числа мы использовали абсолютное позиционирование. С целью, чтобы текст списка находился на одной линии, иначе число будет учитываться как начало строки. То есть нумерация выйдет внутри списка, а не за пределами его.
Нумерованный список с вложением ol и ul
Во многоуровневом списке идет более сложное оформление тегов. В данном случае создадим два счетчика, чтоб цифры вложенного списка изменить на буквы. И также еще добавим hover эффект к тегам, стилизуем внутренние элементы.
HTML
<ol class="wsnumber2"> <li>Текст текст</li> <li>Текст текст <ul> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ul> </li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст <ol> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol> </li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol>
CSS
/* number2 */ ol.wsnumber2{ display: block; counter-reset: wslist2; color:#444; } /* стили для ul */ ol.wsnumber2 li ul{ margin: 1em 0 0em 1em; color:#777; transition: all 0.3s ease 0s; border-left: 1px solid #e3e3e3; } ol.wsnumber2 ul li{ margin: 0 0 1em 2em; list-style: square outside; transition: all 0.3s ease 0s; } /*#end стили для ul */ ol.wsnumber2 > li { list-style: none; margin: 0 0 1em 3em; position:relative; } ol.wsnumber2 > li::before{ background: #e3e3e3; border-radius: 0% 50% 50%; color: #333; content: counter(wslist2) "."; counter-increment: wslist2; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } /*вложенный список ol */ ol.wsnumber2 ol{ display: block; counter-reset: wslistc; color:#777; border-left: 1px solid #e3e3e3; padding-left:15px; transition: all 0.3s ease 0s; } ol.wsnumber2 ol li{ margin: 1em 0 0em 3em; list-style: none; position:relative; transition: all 0.3s ease 0s; } ol.wsnumber2 li li{ font-size: 12px; } ol.wsnumber2 ol li::before{ background: #e3e3e3; border-radius: 0% 50% 50%; color: #333; content: counter(wslistc, lower-latin) "."; counter-increment: wslistc; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } ol.wsnumber2 ol:hover, ol.wsnumber2 ul:hover{ border-left: 1px solid #FB456C; } ol.wsnumber2 li li:hover{ background: #eee; color:#333; } ol.wsnumber2 li:hover:before { background: #FB456C; color:#fff; }
Многоуровневый список
И второй пример с более сложным оформлением. В нем задействуем два, три счетчика и вложенному списку сделает вид подсчета в две цифры.
HTML
<ol class="wsnumber3"> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст <ol> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol> </li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol>
CSS
/* number3 */ ol.wsnumber3{ display: block; counter-reset: wslist3; color:#444; } ol.wsnumber3 li { list-style: none; margin: 0 0 1em 3em; position:relative; } ol.wsnumber3 > li::before{ background:#e3e3e3 ; border-radius:50%; color: #333; content: counter(wslist3); counter-increment: wslist3; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } /*вложенный список ol */ ol.wsnumber3 ol{ display: block; counter-reset: wslists; color:#777; border-left: 1px solid #e3e3e3; padding-left:15px; transition: all 0.3s ease 0s; } ol.wsnumber3 ol li{ margin: 1em 0 0em 3em; list-style: none; position:relative; transition: all 0.3s ease 0s; } ol.wsnumber3 li li{ font-size: 12px; } ol.wsnumber3 ol li::before{ background: #e3e3e3; border-radius:50%; color: #333; content: counter(wslist3) "." counter(wslists) "."; counter-increment: wslists; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } ol.wsnumber3 ol:hover{ border-left: 1px solid #FB456C; } ol.wsnumber3 li li:hover{ background: #eee; color:#333; } ol.wsnumber3 li:hover:before { background: #FB456C; color:#fff; }
Список внутри списка
HTML
<ol class="wsnumber4"> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст <ol> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст <ol> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol> </li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol> </li> <li>Текст текст</li> <li>Текст текст</li> <li>Текст текст</li> </ol>
CSS
/* number4 */ ol.wsnumber4{ display: block; counter-reset: wslist3; color:#444; } ol.wsnumber4 li { list-style: none; margin: 0 0 1em 3em; position:relative; } ol.wsnumber4 > li::before{ background:#e3e3e3 ; border-radius:50%; color: #333; content: counter(wslist3) "."; counter-increment: wslist3; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } /*вложенный список ol */ ol.wsnumber4 ol{ display: block; counter-reset: wslists; color:#777; border-left: 1px solid #e3e3e3; padding-left:15px; transition: all 0.3s ease 0s; } ol.wsnumber4 ol li{ margin: 1em 0 0em 3em; list-style: none; position:relative; transition: all 0.3s ease 0s; } ol.wsnumber4 li li{ font-size: 12px; } ol.wsnumber4 ol li::before{ background: #e3e3e3; border-radius:50%; color: #333; content: counter(wslist3) "." counter(wslists) "."; counter-increment: wslists; display: inline-block; height: 22px; left: -40px; line-height: 22px; padding: 5px; position: absolute; text-align: center; top: 0; transition: all 0.3s ease 0s; width: 22px; } /*end вложенный список ol */ /*вложенный список ol ol*/ ol.wsnumber4 ol ol{ counter-reset: wslists2; } ol.wsnumber4 ol ol li::before{ content: counter(wslist3) "." counter(wslists) "." counter(wslists2); counter-increment: wslists2; font-size:9px; } /*end вложенный список ol ol*/ ol.wsnumber4 ol:hover{ border-left: 1px solid #FB456C; } ol.wsnumber4 li li:hover{ color:#333; } ol.wsnumber4 li:hover:before { background: #FB456C; color:#fff; }
Вид чисел списка с символами
К числам списка можно также добавлять символы, к примеру, решетка, скобки или одинарная скобка, точка и т.д. Все это задается в псевдоэлементе в свойстве content
.
content: counter(wslist3) ".";/* точка после числа*/ content: counter(wslist3) "." ")";/* точка с скобкой после числа*/ content: counter(wslist3) ")";/* одинарная скобка*/ content: "(" counter(wslist3) ")";/* двойная скобка*/ content: "#" counter(wslist3);/* решетка перед числом*/
Свойства значения чисел списка
Кроме арабских чисел, которые задаются по умолчанию, можно устанавливать порядок списка другими значениями. Эти значения указываются через определенные свойства в псевдоэлемент в свойстве content
.
content: counter(wslist3, lower-latin) ".";/* латин. буквы нижнего рег. a, b, c, d, e, etc*/ content: counter(wslist3, upper-latin) ".";/* латин. буквы верхнего рег. A, B, C, D, E, etc*/ content: counter(wslist3, upper-roman) ".";/* римские цифры I, II, III, IV, V, etc*/ content: counter(wslist3, decimal-leading-zero) ".";/* число с нулем 01, 02, 03, etc*/
Текст что вручную вводит каждый раз или в стилях можно где то подправить что бы нумерация была?
Текст? Текст, конечно, каждый раз вводить вручную. Текст — это то, что между тегами
<li></li>
. Выразитесь точнее, что вы имеете в виду.Спасибо, разобрался, сколько бы не было строк, впереди подставляем и закрываем
А как подружить их, например, с start="7"? А то нумерация слетает и начинает не из 7, а с 1. А вообще большое спасибо за материал, выглядит красиво.
Не за что! Просто в стилях укажите начальное число.
WordSmall, ну не вариант. У меня на странице нумерация идет 1, 2, 3, 4, 5, 6, затем идет довольно большой текст, который оформлен простыми абзацами. А затем начинается как-бы новый список, но начинаю я его с 7 (продолжение первого списка) через start="7".
Если сделать так как вы говорите, то выйдет уже 8, 9, 10, 11, 12, 13 и дальше еще раз 8.
Можно попробовать так
Счетчик будет сбрасываться только на первом списке, а дальше будет продолжать... то есть следующий ol продолжение первому. Если не подойдет, то просто вернуться к стандартом списку
Ну... еще как вариант. Оставить все как есть, а там где нужно определенное число, указывать стили «насильно»
WordSmall, о да, все работает. спасибо большое!
Здравствуйте, а как сделать для маркированного списка все тоже, только чтобы в кружочке был знак >
Добрый день. Для маркированного списка можно просто через псевдо before задать маркер.
Что-то вроде этого
WordSmall, Спасибо большое, все получилось. Но как сделать, чтобы так выглядел не один конкретный список, а все списки, которые находятся в записях блога?
В общем вот код для всех списков, которые находятся на страницах записей.
Во многих темах отличается написание. Зависит от классов и идентификаторов