CSS3美化有序列表

如图效果：

<ol class="rightList">
                        <li>
                            <span>周波</span>
                            <span>19</span>
                            <span><i class="iconfont icon-arrow-up-solid"></i></span>
                        </li>
                        <li>
                            <span>王一山</span>
                            <span>16</span>
                            <span><i class="iconfont icon-arrow-down-solid"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span>19</span>
                            <span><i class="iconfont icon-minus"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span>19</span>
                            <span><i class="iconfont icon-arrow-up-solid"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span>19</span>
                            <span><i class="iconfont icon-minus"></i></span>
                        </li>                        
                    </ol>

 

 

.rightList{
                    margin-left: 180px;
                    // border:2px solid red;
                    // background-color: #eee;
                    counter-reset: num; /* 创建一个计数器 */                    
                    >li{
                        height:28px;
                        line-height: 28px;
                        padding-left:45px;
                        background-color: #eee;
                        margin-bottom: 4px;
                        border-radius: 6px;
                        position: relative;
                        >span{
                            display: inline-block;
                            width:31%;
                            // background: #fff;
                            text-align: center;
                        }
                        >span:first-child{
                            text-align: left;
                        }
                        .icon-arrow-up-solid{
                            color:red;
                            font-size: 14px;
                        }
                        .icon-arrow-down-solid{
                            color:#78c06e;
                            font-size: 14px;
                        }
                    }
                    >li:nth-child(1){
                        color:red;
                    }
                    >li:nth-child(1)::before{
                        background-color: red;
                        color:#fff;
                    }
                    >li:nth-child(2){
                        color:#f60;
                    }
                    >li:nth-child(2)::before{
                        background-color: #f60;
                        color:#fff;
                    }
                    >li:nth-child(3){
                        color:#5c6bc0;
                    }
                    >li:nth-child(3)::before{
                        background-color: #5c6bc0;
                        color:#fff;
                    }
                    >li::before{
                        content: counter(num); 
             counter-increment: num; 
                        height: 28px; 
                        width: 28px; 
                        line-height: 28px; 
                        position: absolute; 
                        left: -10px; 
                        top: 50%; 
                        margin-top: -17px; 
                        background: #87ceeb; 
                        font-weight: bold;
                        font-size: 13px;
                        
                        border: 3px solid #fff; 
                        text-align: center; 
                        border-radius: 50%; 
                    }
                    >li,
                    >li::before{
                        -webkit-transition: all 0.3s ease-out; 
                        -moz-transition: all 0.3s ease-out; 
                        -ms-transition: all 0.3s ease-out; 
                        -o-transition: all 0.3s ease-out; 
                        transition: all 0.3s ease-out;
                    }
                    >li:hover{
                        background-color:#ddd;
                    }
                    >li:hover::before{
                        left:-20px;
                        // -moz-transform: rotate(360deg); 
                        // -webkit-transform: rotate(360deg); 
                        // -o-transform: rotate(360deg); 
                        // -ms-transform: rotate(360deg); 
                        // transform: rotate(360deg);
                    }
                }