Красивые нумерованные списки с помощью CSS

<ol>
  <li>Разделение слов в url. Разделять слова в адресе странице необходимо не подчеркиванием, как это делают многие, а дефисом. Url, разделенный дефисами, более легок для чтения и запоминания людьми</li>
  <li>Заголовки должны содержать тег H1. Несмотря на то, что о необходимости использовать тег H1 для написания заголовков страниц существует очень много информации, многие web-мастера продолжают игнорировать эту мелочь.</li>
  <li> Ключевые слова в заголовке страницы. Заголовок страницы должен обязательно содержать ее ключевые слова. В процессе ранжирования документов поисковые системы особое внимание уделяют заголовкам и словам, которые в них содержаться. </li>
</ol>

 ol {
list-style-type: none;
counter-reset: num;
margin: 0 0 0 60px;
padding: 15px 0 5px 0;
font-size: 16px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
}
ol li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0px;
left: -60px;
width: 50px;
color: #ef6780;
text-align: center;
font-size: 40px;
font-weight: bold;
}