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

Списки используются для структурирования информации. Нумерованные списки полезны в тех случаях, когда нужно определить порядок изложения. Многоуровневые списки удобны, когда в одном пункте есть несколько подпунктов. Многоуровневые списки отличаются от обычных списков наличием отступов.

Перейти на страницу с примерами

HTML-разметка для каждого списка будет следующей:

<ol class="list">
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a>
    <ol class="sublist">
      <li><a href="">Элемент вложенного списка первого уровня</a>
        <ol class="sublist2">
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
        </ol>
      </li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
    </ol>
  </li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>			
</ol>

Пример 1

ol {
   counter-reset: li;
   list-style: none;
   margin: 0;
   font-family: 'Didact Gothic', sans-serif;
   /*подключаем через Google Web Fonts*/
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   padding: 5px 0;
   display: inline-block;
   margin-right: 5px;
   border-radius: 3px;
   color: white;
   text-align: center;
   width: 50px;
   transition: .4s linear;
}
.list a {
   display: inline-block;
   padding: 5px;
   text-decoration: none;
   color: #716B65;
   margin: 5px 0;
}
.list>li:before {
   background: #2D5957;
}
.list>li:hover:before {
   background: #112221;
}
.sublist>li:before {
   background: #3AA898;
}
.sublist>li:hover:before {
   background: #215f56;
}
.sublist2>li:before {
   background: #8DC6B3;
}
.sublist2>li:hover:before {
   background: #55aa8e;
}

Пример 2

ol {
   counter-reset: li;
   list-style: none;
   color: #0F2240;
}
.list a {
   font-family: 'Roboto', sans-serif;
   display: block;
   text-decoration: none;
   padding: 5px;
   margin-bottom: 5px;
   background: #8BB4D2;
   border-radius: 5px;
   border: 2px solid #8BB4D2;
   color: #0F2240;
}
.list a:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   display: inline-block;
   margin-right: 5px;
   font-weight: bold;
}
.sublist a {
   background-color: white;
   background-image: radial-gradient(#8BB4D2 .5px, rgba(255, 255, 255, 0) 1px);
   background-size: 6px 6px;
}
.sublist2 a {
   background: white;
}

Пример 3

ol {
   counter-reset: li;
   list-style: none;
   font-family: 'Roboto', sans-serif;
}
.list a {
   display: block;
   text-decoration: none;
   margin-bottom: 5px;
   border-top: 2px solid #68B8AE;
   color: #0F2240;
   background: white;
}
.list a:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   display: inline-block;
   padding: 5px;
   margin-right: 10px;
   font-weight: bold;
   background: #CDE5E1;
   border-left: 2px solid #68B8AE;
   border-bottom: 2px solid #68B8AE;
   border-right: 2px solid #68B8AE;
   color: #68B8AE;
   transition: .3s linear;
}
.list a:hover:before {
   background: #68B8AE;
   color: white;
}

Пример 4

.list, .sublist, .sublist2 {
   margin: 0;
   padding: 0;
   counter-reset: li;
   list-style: none;
   font-family: 'Didact Gothic', sans-serif;
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   padding: 5px 0;
   display: inline-block;
   margin-right: 5px;
   border-radius: 20px;
   color: white;
   text-align: center;
   width: 50px;
}
.list a {
   display: inline-block;
   padding: 5px;
   text-decoration: none;
   color: #716B65;
   margin: 5px 0;
}
ol.list li:before {
   background: #65486C;
}
ol.sublist li:before {
   background: #7282A3;
   box-shadow: 10px 0 0 #97A8C2;
   margin-right: 15px;
   -webkit-transition: .4s linear;
   -moz-transition: .4s linear;
   -ms-transition: .4s linear;
   -o-transition: .4s linear;
   transition: .4s linear;
}
ol.sublist li:hover:before {
   box-shadow: none;
   margin-right: 5px;
}
ol.sublist2 li:before {
   background: #B9ACA6;
   box-shadow: 10px 0 0 #CEBEB1, 20px 0 0 #D9C9BC;
   margin-right: 25px;
   transition: .4s linear;
}
ol.sublist2 li:hover:before {
   box-shadow: none;
   margin-right: 5px;
}

Пример 5

ol {
   margin: 0;
   counter-reset: li;
   list-style: none;
   font-family: 'Kurale', serif;
}
.list a {
   text-decoration: none;
   display: block;
   margin-bottom: 8px;
   padding: 5px;
   position: relative;
   color: #2D3134;
}
.list a:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   padding: 5px 1px 5px 5px;
   color: #948E82;
   margin-right: 5px;
   text-align: center;
   border-right: 3px solid;
   border-left: 3px solid;
   border-top: none;
   border-bottom: none;
   border-radius: 40px/60px;
}