hr元素模拟分隔线效果

展示

代码

• HTML：

  <h4>波浪线</h4>
  <hr class="hr-wavy">
  
  <h4>带文字内容的分隔线</h4>
  <hr class="hr-solid-content" data-content="分隔线">
  <hr class="hr-solid-content" data-content="文字自适应，背景透明">

• CSS：

  .hr-wavy {
      border: 0;
      color: darkgray;
      height: .5em;
      padding-top: .5em;
      text-align-last: justify;
  }
  .hr-wavy::before {
      content: "\3000\3000";
      text-decoration-style: wavy;
      text-decoration-line: overline;
  }
  
  .hr-solid-content {
      color: gray;
      border: 0;
      font-size: 12px;
      padding: 1em 0;
      position: relative;
  }
  .hr-solid-content::before {
      content: attr(data-content);
      position: absolute;
      padding: 0 1ch;
      line-height: 1px;
      border: solid darkgray;
      border-width: 0 99vw;
      width: fit-content;
      /* for 不支持fit-content浏览器 */
      white-space: nowrap;
      left: 50%;
      transform: translateX(-50%);
  }