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

0xnfe4xqzh.png

代码如下:

HTML:

  • html中引入调用另一个公用html模板文件的方法19040 ℃
  • input[type=file]去掉“未选择任何文件”及样式改进10786 ℃
  • Jetbrains系列激活补丁JetbrainsCrack-2.8更新6161 ℃
  • js获取input上传文件的文件名和扩展名的方法5683 ℃
  • HTML img src图片路径不存在,则显示一张默认图片的方法5324 ℃
  • HTML引入文件的绝对路径、相对路径、根目录5284 ℃
  • HTML img src图片路径不存在,则显示一张默认图片的方法5324 ℃
  • HTML引入文件的绝对路径、相对路径、根目录5284 ℃

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

ul{
    list-style: none;
}
li{
    position: relative;
    padding-left: 30px;
    height: 36px;
    line-height: 36px;
}
li:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    background: #999999;
    text-align: center;
    position: absolute;
    left: 0;
    top: 8px;
}
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";}

请为这篇文章评分:
( 已有 3 人评分, 平均得分: 4.33 分 )

Tags: css

Related Posts:

评论已关闭