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

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

第一种：

效果：

html:

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

________________________________

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