用：after伪元素标签写分割线

来源：互联网发布：java订单管理系统编辑：程序博客网时间：2024/05/24 06:48

最近在手机商城和微信页面很多都用到了分割线，下面总结用到的分割线。

第一种：

效果：

html:

________________________________

style:

.hot{
           width:100%;
           height:20px;
           background-color:#f2f2f2;
           text-align:center;
           color:#000;
           font-size:12px;
           line-height:20px;
           position:relative;
       }
       .hot:after{
           content:"";
            width:100%;
            height:1px;
           background-color:red;
           position:absolute;
           bottom:50%;
           z-index:1;
           left:0;
       }
      .hot span{
         z-index:2;
         position: relative;
         background-color:#f2f2f2;
         padding:0 10px;
      }

看着效果还可，就是线有点粗不好看，这个就要用到渐变了。

    .hot:after{
           content:"";
            width:100%;
            height:1px;

/*这个就是设置渐变的啦！*/

           background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
background-image:         linear-gradient(top, hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
           position:absolute;
           bottom:50%;
           z-index:1;
           left:0;
       }

加上渐变后的效果，是不是美美滴！

第二种：

效果如下：

html:

style:

.list{
         width:100%;
         background-color:#f2f2f2;
         margin-top:10px;
      }
      .list ul{
         list-style:none;
      }
      .list li{
           height:40px;
           padding-left:30px;
           position:relative;
      }
      .list li:after{
         content:'';
         width:calc(100% - 40px);/*如果两边都要留空位的话就需要计算宽度*/
        height:1px;
        background-color:red;
        bottom:0;
        left:40px;
        position:absolute;

      }

第三种：

效果如下：

html:

style:

.range {
width: 100%;
background: rgba(0, 0, 0, 0.6);
top: 0;
overflow: hidden;
position: absolute;
}

.range a {
text-decoration: none;
float: left;
text-align: center;
width: 50%;
display: inline-block;
padding: 10px 0;
color: #fff;
font-size: 13px;
}

.range:after {
content: "";
width: 1px;
height: 70%;
background-color: #fff;
position: absolute;
left: 50%;
top: 5px;
}

注意：这里的定位都是固定定位

0 0