用css方法，给标题两边加小横杠

我们经常会遇到这样的 UI 需求，就是标题两边有两个小横岗，之前是怎么实现的呢？比如用个border-top属性，然后再把中间的文字进行绝对定位，同时给这个文字一个背景颜色，把中间的这部分盖住。

       .title {
            color: #e1767c;
            font-size: 0.3rem;
            position: relative;
            text-align: center;
            font-size: 30px;
        }
        
        .title:before,
        .title:after {
            content: "";
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border-top: 0.2rem solid #e1767c;
            width: 2rem;
        }
        
        .title:before {
            margin-left: -4rem;
        }
        
        .title:after {
            margin-left: 4rem;
        }