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

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

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

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

Стили CSS
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;
} 
  • Создание Сайтов

    Отличная заначка!

    • Спасибо! Единственное, вложенность списков несколько ограничивает варианты оформления(

  • Алексей Сумин

    Красивое и интересное оформление. Очень пригодилось, но пришлось ещё один уровень добавить. Спасибо большое.

  • Дмитрий Семененко

    Спасибо! Отличные стили! В первом примере только стоит добавить к li:before класс list
    .list li:before