html - 如何实现双线穿过某些文本但不在文本之上的效果？描述中的图像

Question

我找到了 this对标题文本进行的样式化，我认为它是一个贯穿文本但不与其重叠的双边框。有谁知道我怎样才能对我的 h1 元素做同样的事情？

Answer 1

快速而肮脏的解决方案:

    h1 {
      position: relative;
      text-align: center;
     }
    h1:before {
      content: " ";
      position: absolute;
      height: 6px;
      width: 40%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      left: 0;
      top: 40%;
    }
    h1:after {
      content: " ";
      position: absolute;
      height: 6px;
      width: 40%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      right: 0;
      top: 40%;
    }

    <h1>Title</h1>