CSS3 Landscaping ordered list

Effect:

<olclass="rightlist"> <li> <span> Cycles </span> & Lt;span> +</span> <span><iclass="Iconfont Icon-arrow-up-solid"></i></span> </li> <li> <span> Wang Yishan </span> <span> -</span> <span><iclass="Iconfont Icon-arrow-down-solid"></i></span> </li> <li> <span> Cycles </span> <span> +</span> <span><iclass="Iconfont Icon-minus"></i></span> </li> <li> <span> Cycles </span> <span> +</span> <span><iclass="Iconfont Icon-arrow-up-solid"></i></span> </li> <li> <span> Cycles </span> <span> +</span> <span><iclass="Iconfont Icon-minus"></i></span> </li> </ol>

. rightlist{margin-left:180px; //border:2px solid red; //background-color: #eee;                     counter-reset:num;/* Create a counter *  />li{height:28px; Line-height:28px; Padding-left:45px; Background-color: #eee; Margin-bottom:4px; Border-radius:6px;                        position:relative; >span{Display:inline-lock; Width: to%; //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: -%; 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:all0.3s ease- out; -moz-transition:all0.3s ease- out; -ms-transition:all0.3s ease- out; -o-transition:all0.3s ease- out; Transition:all0.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);                    }                }

CSS3 Landscaping ordered list