Стилизация списков, многоуровневые списки

by Евгений

HTML

<ol>
   <li>Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов: 
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>

CSS

li { 
    position:relative;
    font-weight:700;
    line-height:30px;
    margin:0 0 8px;
    list-style-type: none; } /* Убираем исходную нумерацию у списка */
ol { counter-reset: list1; } /* Инициируем счетчик */
   ol li:before {
       position:absolute;
    width:20px;
    height:30px;
    line-height:30px;
    left:-40px;
    padding:0 5px;
    text-align:center;
    counter-increment: list1; /* Увеличиваем значение счетчика */
    content: counter(list1) " "; /* Выводим число */
     color: white;
  background: #2980B9;
   }
   ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
   ol ol li:before {
    counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
    content: counter(list1) "." counter(list2); /* Выводим число */
   }