两侧带线的标题

论坛用户 McAsh 想知道 他们如何才能编写一个设计，其中包含一个大型标题，下方是一个较小的副标题，副标题中包含双水平线，在居中文本的左右两侧伸出。这很容易以图像形式进行模拟，但在 CSS 中由于文本的变量特性（长度、大小等）而更难实现。

帖子模拟如下

我编写了一个有效的实现方法，但并不完美。我想我会在这里发布它，如果您能想到更好的方法，请随时提出。

如果背景是纯色，这将非常容易。将带线条的背景应用于副标题，并在中间居中一个 span，并在 span 中添加一些内边距和与纯色背景匹配的背景颜色。这里我们没有纯色背景。可能使用相同的背景图像但固定背景位置会起作用，但我没有尝试这种方法。

相反，我使用 ::before 和 ::after 伪元素创建左右两组线条。文本仍然在 span 中，该 span 处于相对定位状态。右侧线条是该 span 上的伪元素，从左侧 100% 开始，并带有一点边距将其推开，左侧线条则相反。两者都具有固定的高度，并使用 border-top 和 border-bottom 创建线条。因此，没有使用任何背景，所有内部都透明。

线条的长度足够长，始终会超出父容器，并且会通过父容器上的隐藏溢出被截断。

.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

示例

Check out this Pen!

有两个我不喜欢的地方。

1. 里面的 line-height: 0.5 用于将线条居中在文本周围，对我来说感觉像是“魔数”，它可能不适合所有字体。
2. 伪元素线条的宽度并不完全符合要求，但比实际需要长得多，并被截断。

这些问题虽然不是特别严重，但可以巧妙地解决。