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

HTML

<ol>
    <li>Влюбиться</li>
    <li>Завести собаку</li>
    <li>Посадить дерево</li>
    <li>Построить дом</li>
    <li>Воспитать сына</li>
    <li>Воспитать дочь</li>
</ol>

CSS

ol {
  counter-reset: myCounter;
}

li{
  list-style: none;
  line-height: 20px;
  margin: 0 0 8px 0;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: green;
  display: inline-block;
  text-align: center;
  line-height: normal;
  height: auto;
  width: auto;
  margin: 0 10px 0 0;
  padding: 0 8px;
}

Источник