数字li 用伪元素:before

code:

.ranking_list li{
    position:relative;
}
.ranking_list li:before{
    counter-increment:ranking_list_li;
    content:counter(ranking_list_li);
    color:#ffffff;
    position:absolute;
    left:0;
    top:7px;
    width:18px;
    height:15px;
    background:#818181;
    line-height:normal;
    text-align:center;
    font-size:10px;
}
.ranking_list li:first-child:before{
    background:#e05102;
}
.ranking_list li:nth-child(2):before{
    background:#830abb;
}
.ranking_list li:nth-child(3):before{
    background:#1ba809;
}

转载于:https://www.cnblogs.com/FineDay/articles/3123729.html