CSS文字左右两边有线

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/HarryHY/article/details/102081544

效果图：

结构

      <div class="more">
        <div class="liner"></div>
        <div class="text">
          <span>点击查看更多</span>
        </div>
      </div>

CSS如下：

.liner {
      margin: 0 15%;
      width: 70%;
      height: 2px;
      background-color: #c0c0c0;
      position: absolute;
      top: 50%;

    }
    .text {
      text-align: center;
      height: 76px;
      line-height: 76px;
      margin: 0 auto;
      background-color: #cacaca;
      position: relative;
      z-index: 3;
      display: inline-block;
      padding: 0 25px;
    }
    .more {
      line-height: 85px;
      color: #4d4a45;
      position: relative;
    }