Нумерованный список и примеры его оформления

Нумерованный список, который обозначается тегам <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*/

14 комментариев

ana4220:

08.03.2018 в 11:00

Текст что вручную вводит каждый раз или в стилях можно где то подправить что бы нумерация была?

Ответить
1. WordSmall:
  
  08.03.2018 в 12:04
  
  Текст? Текст, конечно, каждый раз вводить вручную. Текст — это то, что между тегами <li></li>. Выразитесь точнее, что вы имеете в виду.
  
  Ответить
ana4220:

09.03.2018 в 11:53

Спасибо, разобрался, сколько бы не было строк, впереди подставляем и закрываем

Ответить
merfo:

03.06.2019 в 12:29

А как подружить их, например, с start="7"? А то нумерация слетает и начинает не из 7, а с 1. А вообще большое спасибо за материал, выглядит красиво.

Ответить
1. WordSmall:
  
  03.06.2019 в 13:19
  Не за что! Просто в стилях укажите начальное число.
  ol.wsnumber1 { display: block; counter-reset: wslist1 8;/*старт числа*/ color:#777; list-style: none;/*отменяем маркер по умолчанию*/ }
  Ответить
  1. merfo:
    
    03.06.2019 в 14:59
    
    WordSmall, ну не вариант. У меня на странице нумерация идет 1, 2, 3, 4, 5, 6, затем идет довольно большой текст, который оформлен простыми абзацами. А затем начинается как-бы новый список, но начинаю я его с 7 (продолжение первого списка) через start="7".
    Если сделать так как вы говорите, то выйдет уже 8, 9, 10, 11, 12, 13 и дальше еще раз 8.
  2. WordSmall:
    
    03.06.2019 в 16:23
    Можно попробовать так
    ol.wsnumber1 { display: block; color:#777; list-style: none;/*отменяем маркер по умолчанию*/ } ol.wsnumber1:first-of-type { counter-reset: wslist1; }
    
    Счетчик будет сбрасываться только на первом списке, а дальше будет продолжать... то есть следующий ol продолжение первому. Если не подойдет, то просто вернуться к стандартом списку
    <ol start="7"> <li>сп</li> <li>сп</li> <li>сп</li> </ol>
WordSmall:

03.06.2019 в 16:37
Ну... еще как вариант. Оставить все как есть, а там где нужно определенное число, указывать стили «насильно»
```
<ol class="wsnumber1" style="counter-reset: wslist1 8 !important;>
    <li>Текст текст</li>
</ol>
```
Ответить
1. merfo:
  
  03.06.2019 в 21:25
  
  WordSmall, о да, все работает. спасибо большое!
  
  Ответить
Vaaad:

05.09.2019 в 00:44

Здравствуйте, а как сделать для маркированного списка все тоже, только чтобы в кружочке был знак >

Ответить
1. WordSmall:
  
  05.09.2019 в 17:22
  Добрый день. Для маркированного списка можно просто через псевдо before задать маркер.
  Что-то вроде этого
  ul> li::before { background: #674FB6; border-radius: 50%; color: #fff; content: '>'; display: inline-block; height: 22px; line-height: 22px; padding: 5px; text-align: center; width: 22px; }
  Ответить
  1. Vaaad:
    
    08.09.2019 в 14:48
    
    WordSmall, Спасибо большое, все получилось. Но как сделать, чтобы так выглядел не один конкретный список, а все списки, которые находятся в записях блога?
Vaaad:

10.09.2019 в 15:46

В общем вот код для всех списков, которые находятся на страницах записей.

Ответить
1. WordSmall:
  
  10.09.2019 в 16:30
  
  Во многих темах отличается написание. Зависит от классов и идентификаторов
  
  Ответить