css couter

by this_mong

HTML

<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>

CSS

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
}