利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜

利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜,圆角效果。

利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜

代码如下:

HTML:

<ul>
    <li>战狼2</li>
    <li>战狼3</li>
    <li>战狼1</li>
    <li>战狼2免费在线观看完整版</li>
    <li>战狼2票房</li>
    <li>战狼2免费在线观看</li>
    <li>战狼ptsd</li>
    <li>战狼1免费在线观看</li>
</ul>

CSS:

需要给添加伪类的元素设置 position: relative;

ul{
    list-style: none;
}
li{
    position: relative;
    line-height: 32px;
    height: 32px;
    padding-left: 32px;
}
li:after{
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #FFF;
    background: #999999;
    text-align: center;
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 14px;
    border-radius: 9px;
}
li:first-child:after {content: "1";background: #FD8C84;}
li:nth-child(2):after {content: "2";background: #FFCC99;}
li:nth-child(3):after {content: "3";background: #7FD75A;}
li:nth-child(4):after {content: "4";background: #CCCCFF;}
li:nth-child(5):after {content: "5";background: #60C4FD;}
li:nth-child(6):after {content: "6";}
li:nth-child(7):after {content: "7";}
li:nth-child(8):after {content: "8";}
li:nth-child(9):after {content: "9";}
li:nth-child(10):after {content: "..";}
继续阅读
小王先森
  • 本文由 发表于 2020年1月21日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • 简单生活 简单生活 2

      主题前面序号就是这么搞的!