CSS伪类实现中间文字两边横线效果

一、通过display:table实现

html

<div class="line">中间文字</div>

css

    .line {
      display: table;
      width: 100%;
      white-space: nowrap;
      border-spacing: .2rem 0;
      color: #ccc;
    }

    .line:before,
    .line:after {
      display: table-cell;
      content: '';
      width: 50%;
      background: -webkit-linear-gradient(#eee, #eee) repeat-x left center;
      background: linear-gradient(#eee, #eee) repeat-x left center;
      background-size: 0.1rem 0.1rem;
    }

效果展示

 二、通过position定位实现

html

  <div class="lineWrap">
    <div class="line">中间有文字</div>
  </div>

css

    .lineWrap {
      position: absolute;
      text-align: center;
      width: 100%;
    }
    .lineWrap .line {
      color: #ccc;
      font-size: 20px;
    }

    /*CSS伪类用法*/
    .lineWrap .line:after,
    .lineWrap .line:before {
      background: #eee;
      content: "";
      height: 2px;
      position: absolute;
      top: 50%;
      /* 左右横线的宽度 = 页面总宽度的一版 - 文字宽度的一半  */
      width: calc(50% - 50px); 
    }

    /*调整背景横线的左右距离*/
    .lineWrap .line:before {
      left: 0;
    }
    .lineWrap .line:after {
      right: 0;
    }

效果展示

 

 文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料