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

Нумерованный список, который обозначается тегам <ol>, в отличие от своего «старшего брата» маркированного списка <ul>, поддается оформлению значительно труднее. Именно речь идет о счетчике, где в зависимости от параметров выводится значение порядкового типа. Это могут быть римские цифры, арабские цифры, буквы нижнего и верхнего регистра и т.д.

Чтобы задать стили нумерованному списку, мы вначале отменим значение по умолчанию через свойство list-style. А затем сбрасываем счетчик с помощью свойства counter-reset, указав идентификатор и начальное значение. И выведем на экран результат, использовав псевдоэлемент before или after.

Оформление нумерованного списка

список ul

В оформлении для примера решим пару задач, и учтем вложение списка как нумерованного, так и маркированного. Первый пример приведем самый простой и уточним принцип свойств.

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

вложение 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 комментариев
  1. Текст что вручную вводит каждый раз или в стилях можно где то подправить что бы нумерация была?

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

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

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

    1. Не за что! Просто в стилях укажите начальное число.

      ol.wsnumber1  {
              display: block;
              counter-reset: wslist1 8;/*старт числа*/
              color:#777;
              list-style: none;/*отменяем маркер по умолчанию*/
      }
      

      1. WordSmall, ну не вариант. У меня на странице нумерация идет 1, 2, 3, 4, 5, 6, затем идет довольно большой текст, который оформлен простыми абзацами. А затем начинается как-бы новый список, но начинаю я его с 7 (продолжение первого списка) через start="7".

        Если сделать так как вы говорите, то выйдет уже 8, 9, 10, 11, 12, 13 и дальше еще раз 8.

      2. Можно попробовать так

        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>
        
        
        

  4. Ну... еще как вариант. Оставить все как есть, а там где нужно определенное число, указывать стили «насильно»

    <ol class="wsnumber1" style="counter-reset: wslist1 8 !important;>
        <li>Текст текст</li>
    </ol>
    

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

    1. Добрый день. Для маркированного списка можно просто через псевдо 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. WordSmall, Спасибо большое, все получилось. Но как сделать, чтобы так выглядел не один конкретный список, а все списки, которые находятся в записях блога?

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

    1. Во многих темах отличается написание. Зависит от классов и идентификаторов

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *