::after伪元素实现分割线

很多时候，在页面上需要分割线来分割行，板块…
显然现在很少人用<hr> 来实现分割了吧。。
今天刚学到一手：用:after伪元素实现模块分割，使之看起来不是那么的空泛无序。

• 首先准备html：

<div class="logo">
    <a href="#">
        M2B2C
    </a>
</div>

• css

.logo{
    text-align: center;
}

.logo::after{
    content: '';
    position: absolute;
    display: block;
    margin-top = 5px;
    right: 10%;
    height: 1px;
    width: 80%;
    background-color: rgba(180, 180, 180, 0.3);
}

• 预览效果就不展示了。

总结：灵活运用:after和:before，其功能远不止于此。
慢慢学吧。