Styling ordered list numbers

by fparent

HTML

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <li>Etiam a leo vel lectus cursus interdum eget et felis.
    <li>Nullam elementum massa at odio ornare consectetur.
    <li>Duis vel nunc ut lacus sagittis adipiscing a ac odio.
    <li>Nunc euismod ante vel massa iaculis non ultrices libero mattis.
    <li>Vestibulum interdum scelerisque ante, sed ullamcorper nunc accumsan sit amet.
    <li>Curabitur vel ligula lectus, ut venenatis erat.
    <li>Vestibulum tempus euismod eros, a condimentum lacus sodales non.
    <li>Curabitur id felis vitae velit pharetra aliquam ut vitae purus.
    <li>Cras ac tellus metus, ac rhoncus lacus.
    <li>Suspendisse dignissim feugiat lacus, ac consequat turpis tempor non.
    <li>Nam iaculis leo eu tortor tristique et tristique urna volutpat.
    <li>Nullam a leo a massa commodo mollis.
    <li>Vivamus eu turpis lacus, nec condimentum sem.
    <li>Praesent ut turpis eu eros condimentum interdum ac sed tellus.
    <li>Mauris mollis dolor eu ligula sagittis sollicitudin.
    <li>In blandit augue sem, in placerat nunc.
    <li>Integer id dolor quis orci commodo malesuada.
    <li>Donec euismod eleifend ipsum, id congue dolor fringilla quis.
    <li>Suspendisse sed justo ac ipsum lobortis pellentesque.
    <li>Donec molestie enim vel lacus scelerisque commodo.
    <li>Proin congue lorem at elit ullamcorper at venenatis neque congue.
    <li>Aliquam aliquam nisl eu eros rutrum ornare.
    <li>Praesent vel tortor vitae risus consectetur eleifend vel eu tortor.
    <li>Fusce vitae urna sed ante pellentesque ullamcorper.
    <li>Nunc egestas libero at est auctor feugiat.
    <li>Proin eu augue id mi consequat dignissim eu ut odio.
    <li>Morbi a erat vel leo ultricies fringilla eget vitae nisi.
    <li>Sed nec urna vitae erat tempus posuere.
    <li>Vestibulum feugiat elit eget nunc ullamcorper vitae convallis nunc dictum.
    <li>Duis non mi vestibulum tortor molestie aliquet.
    <li>Duis ac arcu id risus...

CSS

ol {
    counter-reset: li; /* Initiate a counter */
    margin-left: 0; /* Remove the default left margin */
    padding-left: 0; /* Remove the default left padding */
}

ol > li {
    position: relative; /* Create a positioning context */
    margin: 0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding: 4px 8px; /* Add some spacing around the content */
    list-style: none;
}

ol > li:before {
    content: counter(li); /* Use the counter as content */
    counter-increment: li; /* Increment the counter by 1 */
    
    /* Position and style the number */
    position: absolute;
    top: 2px;
    left: -20px;

    width: 20px;
    height: 20px;

    margin-right: 8px;

    color: #fff;
    background: #15e1ff;
    line-height: 20px;
    text-align:center;
    font-size: 10px;
    
  -webkit-border-radius: 20px;
          border-radius: 20px;
}