：after伪元素标签写分割线

最近在写手机商城网站，用到了分割线，下面跟大家分享一下这种写法。

第一种写法：

html:

<div class="hor">
        <span>产品热卖</span>
    </div>

style:

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

效果如下：

注意：

   z-index属性要配合相对定位和绝对定位才会起作用的。

第二种写法：

html:

    <div class="list">
                <ul>
                    <li>产品</li>
                    <li>法律</li>
                    <li>体检</li>
                    <li>案例</li>
                    <li>新增</li>
                </ul>
    </div>

style:

 .list{
          width:100%;
          background-color:#f2f2f2;
          margin-top:10px;


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

      }

效果如下：