Question

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

你可以找到它here。

基本上我正在寻找一种在标题之前和之后有伪元素的方法，以显示来自边的1px高度线并被文本打断。

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

如果文本很长（或显示小），文本将换行两行。然后左边的线仍然在开头的旁边，右边的部分将保持在结尾的旁边。

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

我的理想是这样的

______________________________ More text that will cover _________________________
                                    multiple lines

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

Answer 1

使用伪元素绘制线条，并将其从顶部或底部定位50％，以使其保持在文本的中心，即使文本转到2行。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用伪元素设计标题

1 个答案: