如图：
html代码：
1 <div class="detail-news">2 ????????<h5 class="detail-news-title">3 ????????????<span>详细信息</span>4 ????????</h5>5 </div>
css代码：
1 .detail-news-title{ 2 ????font-size: 16px; 3 ????font-weight: normal; 4 ????text-align: center; 5 ????padding-top: 10px; 6 ????position: relative; 7 } 8 .detail-news-title::before{ 9 ????content: "";10 ????display: block;11 ????width: 60vw;12 ????height: 1px;13 ????background: #333;14 ????position: absolute;15 ????left: 50%;16 ????margin-left: -30vw;17 ????top: 18px;18 }19 .detail-news-title span{20 ????padding: 0 10px;21 ????background: #fff;22 ????position: relative;23 ????z-index: 2;24 }CSS实现：标题两侧画线效果
原文地址：https://www.cnblogs.com/yangguoe/p/9857938.html