html - 使用伪元素设计标题

Question

我在 CodePen 上做了一个小笔来展示这个问题，我认为如果你看一下它是最简单的。

你可以找到它here .

基本上，我正在寻找一种在标题前后添加伪元素的方法，以显示一条 1px 高的线，该线来自侧面并被文本打断。

-------------------------------------- Text --------------------------------------

如果文本很长(或显示很小)，文本将换行。那么左边的行仍然在开头，右边的部分在结尾。

------------------------------ More text that will cover
                                    multiple lines ------------------------------

我的理想是这样的

______________________________ More text that will cover _________________________
                                    multiple lines

不幸的是，我无法得到这个...

Answer 1

使用伪元素绘制线条，并将其定位在距离顶部或底部 50% 的位置，以使其保持在文本的中心，即使文本达到 2 行也是如此。

h5 {
  text-align: center;
  position: relative;
}
h5:before {
  content: '';
  position: absolute;
  top: 50%;
  background: #000;
  height: 1px;
  left: 0; right: 0;
}

span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
  text-align: center;
  display: inline-block;
}

<h5><span>This is<br>some text</span></h5>