纯 CSS 实现排行榜序号设计

我们偶尔会遇到排行榜的设计，按序号罗列排名，前几名会再加上图片标识。比如蚂蚁森林的排行榜或者简书校园排行榜。

如果用 <li> 元素配合 list-style: decimal; 属性，往往不能满足设计需要，总会有个英文句号跟在数字后面。如果单独加一个元素为了放序号和图片，似乎又有点小题大做。

这时可以尝试用伪元素结合 counter-increment 属性的方法，简单实现这种效果。

counter-increment是 CSS 计数器，计的是纯数字的形式。首先给 <li> 元素添加 :before 伪元素，一般我们会把伪元素设置content: '';，因为这样伪元素才能生效，但是我们现在可以往 content 里填内容，填的就是计数出来的counter(li)。即：

content: counter(li);
counter-increment: li;

同时，给父元素 <ol> 或者 <ul> 加上：

counter-reset: li;

至于前三名的特殊图片，用 :nth-of-type() 选择器，再配合background-image 属性的方法即可完成。