css实现文字左右横线划线

.left-right-center-line {
    color: #999;
    line-height: .02rem;
    font-size: .24rem;
    text-align: center;
    margin: .4rem 1.54rem;
    border-left: 1.16rem solid #efefef;
    border-right: 1.16rem solid #efefef;
  }

还有一个左右划线渐变的

 .left-right-center-line {
      position: relative;
      color: #999;
      line-height: .4rem;
      font-size: .24rem;
      text-align: center;
      padding: .96rem 0 .32rem;
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        top:1.16rem;
        left: 0;
        height: .04rem;
        background:-webkit-linear-gradient(left, rgba(239, 239, 239, 0) 0%,
             rgba(239, 239, 239, 50%) 30%,rgba(239, 239, 239, 100%) 35%,rgba(239, 239, 239, 0) 36%,
             rgba(239, 239, 239, 0) 64%,rgba(239, 239, 239, 100%) 65%, rgba(239,239,239, 50%) 70%, 
             rgba(239,239,239, 0) 100%);
      }
    } 

element-ui v2.8.2中有了分割线写法
https://element.eleme.cn/#/zh-CN/component/divider
略看了下，是中间文字设置background #fff遮挡背景横线，若背景为非fff色会达不到预期效果，感觉不合适