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

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

第一种：

效果：

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:

   

        优惠幅度6.8折
        已有999人购买
   

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;
    }

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