Нумерованный список

Severniy · 19 января, 2018

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

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*/

Тестировал, мне понравилась но единственное CSS огромный

Войти

Нумерованный список

Рекомендуемые сообщения

Severniy

Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Форумы

Файлы

Новости и статьи