<ul class="num"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.</li> <li>Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. </li> <li>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. </li> </ul>
ul,li { list-style:none; } .num { counter-reset: list-number; margin-bottom: 49px; } .num > li { counter-increment: list-number; padding-bottom: 7px; font-size: 20px; } .num > li::before { content: counter(list-number); display: inline-block; text-align: center; line-height: 1.5; width: 25px; height: 25px; border-radius: 50%; color: #fff; margin-right: 10px; background: #00CE7A; font-size: 16px }