Стилизация списка ol

CSS стилизация нумерованных списков. Наиболее правильный и универсальный способ - второй.

Способ первый

CSS:

li{
  list-style: none;
}

.num{
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

HTML:

<ol>
  <li><span class="num">1</span> Посадить дерево </li>
  <li><span class="num">2</span> Построить дом </li>
  <li><span class="num">3</span> Вырастить сына </li>
</ol>

Способ второй

CSS:

ol{
  counter-reset: myCounter;
}

li{
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content:counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

HTML:

<ol>
  <li> Посадить дерево </li>
  <li> Построить дом </li>
  <li> Вырастить сына </li>
</ol>