CSS3美化有序列表

如图效果：

<ol class="rightList">
                        <li>
                            <span>周波</span>
                            <span></span>
                            <span><i class="iconfont icon-arrow-up-solid"></i></span>
                        </li>
                        <li>
                            <span>王一山</span>
                            <span></span>
                            <span><i class="iconfont icon-arrow-down-solid"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span></span>
                            <span><i class="iconfont icon-minus"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span></span>
                            <span><i class="iconfont icon-arrow-up-solid"></i></span>
                        </li>
                        <li>
                            <span>周波</span>
                            <span></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:%;
                            // 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(){
                        color:red;
                    }
                    >li:nth-child()::before{
                        background-color: red;
                        color:#fff;
                    }
                    >li:nth-child(){
                        color:#f60;
                    }
                    >li:nth-child()::before{
                        background-color: #f60;
                        color:#fff;
                    }
                    >li:nth-child(){
                        color:#5c6bc0;
                    }
                    >li:nth-child()::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: %;
                        margin-top: -17px;
                        background: #87ceeb;
                        font-weight: bold;
                        font-size: 13px;

                        border: 3px solid #fff;
                        text-align: center;
                        border-radius: %;
                    }
                    >li,
                    >li::before{
                        -webkit-transition: all .3s ease-out;
                        -moz-transition: all .3s ease-out;
                        -ms-transition: all .3s ease-out;
                        -o-transition: all .3s ease-out;
                        transition: all .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);
                    }
                }