.cl_ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    /*font: 15px 'trebuchet MS', 'lucida sans';*/
    
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    list-style-position: outside;
  }

  .cl_ol  {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
  }
  
/*  .cl_li {
      padding: 10px;
  }*/
  
    .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    /*background: #ddd;*/
    color:black;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
  }

  .rounded-list a:hover{
/*    background: #eee;*/
 background: #dee6f2;
  }

  .rounded-list a:hover:before{
    transform: rotate(360deg);
  }

  .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
/*    background: #ff432e;*/
 /*background: #0985d8;*/
 /*background: radial-gradient(ellipse farthest-corner, #800080 0%, #fff 90%);*/
 background: linear-gradient(222deg, #800080, #800080, #fff); 
    height: 2.4em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    color: #fff;
  }
  
  best practices