纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计，按序号罗列排名，例如：优美mipCms主题中的热门/热评排行：

如果用li元素配合list-style: decimal; 属性，会有个英文句号跟在数字后面，不能满足我们想要的效果；如果单独加一个元素专门用来放序号或者图片，又有点大题小做，而且增加页面代码量。

这时我们可以尝试使用伪元素结合counter-increment属性的方法，来简单实现我们想要的效果，具体代码如下：

html代码

<ul>
 <li>优美企业品牌营销版主题</li>
 <li>优美在线咨询反馈插件</li>
 <li>优美中国风版商品展示主题</li>
 <li>优美畅享版企业站响应式主题</li>
 <li>优美轻奢版响应式主题</li>
</ul>

css样式

ul {
    margin: 0;
    padding: 0;
    counter-reset: li;
}
ul > li:before {
    content: counter(li);
    counter-increment: li;
}

至于排行前三不同的背景颜色可以通过结合nth-child选择器来实现

ul > li:nth-child(1):before,ul > li:nth-child(2):before,ul > li:nth-child(3):before{color: #fff;}
ul > li:nth-child(1):before {
    background: #FF6B57;
}
ul > li:nth-child(2):before {
    background: #2ea7e0;
}
ul > li:nth-child(3):before {
    background: #6bc30d;
}