Добиться результата можно, используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.
CSS:
ol{counter-reset: myCounter;padding: 0;}
ol li{list-style: none;position: relative;padding-left: 36px;min-height: 28px;margin-bottom: 16px;}
ol li:before {
counter-increment: myCounter;
content:counter(myCounter)".";
color: white;
background: #FF8A00;
display: inline-block;
text-align: center;
line-height: 28px;
width: 28px;
height: 28px;
border-radius: 100px;
font-weight:600;
position: absolute;
left: 0;top: 0;
}
HTML:
<ol>
<li> Посадить дерево </li>
<li> Построить дом </li>
<li> Вырастить сына
</li>
</ol>
