在标题左右加上一条横线，以此突出标题，这种样式在开发中很常见，使用css的伪类before、after实现，前面有很多关于伪类实现三角形、聊天气泡框的文章可以自行翻阅，虽然功能很简单，但是这里记录一下分享出来，节约以后的开发时间，效果图如下：

css代码：

      h5{
            position: relative;
            width: 130px;
            margin:80px auto;
            text-align: center;
            font-weight: normal;
        }
        h5:before,h5:after{
            position: absolute;
            content: '';
            width:60%;
            height: 1px;
            top:50%;
            background-color: #ff7f00;
        }
         h5:before{
             right:130px;
         }
         h5:after{
             left: 130px;
         }

html代码：

<h5>我的自定义标题</h5>

这里线条的宽度已经距离标题文字的距离都可以自定义。

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。