css实现中间标题两边横线

css实现中间标题两边横线

[个人笔记]

重点:
利用的是css伪类选择器:before & :after

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<!-- 第三部分 砍价记录 -->
    <div class="bargainRecord">
        <div class="bargainRecord_title">
                砍价记录
        </div>
    </div>

.bargainRecord_title{
    
    
    font-weight: bold;
    text-align: center;
    position: relative;
    color:#fff;
}
/*文字前*/
.bargainRecord_title:before {
    
    
    content: "";
    position: absolute;
     width: 35%;/*横线长度 */
    height: 1px;
    top: 50%;
    background: #fff;
    left: 0;
  }
  /*文字后*/
.bargainRecord_title:after {
    
    
    content: "";
    position: absolute;
    width: 35%;
    height: 1px;
    top: 50%;
    background: #fff;
    right: 0%;
}

效果图

ui图

我的