css文本元素与右侧文本后面的行

Question

如何在CSS中制作这个标题？最好没有flexbox。

图像：

Answer 1

虽然我希望你能提供一些代码并向我们展示你所尝试的内容，但以下是一种方法。

基本上你创建一个after伪元素，给它一个1px的高度和你选择的背景颜色。然后将它绝对放在具有较低z-index的父标题元素中。

使用flexbox可能有更好的方法，但我没有按照问题提及。

＆＃13;

＆＃13;

.with-line {
  position: relative;
}
.with-line span {
  /*change it to match whatever background color you want.*/
  background: white;
  
}
.with-line:after {
  position: absolute;
  left: 0;
  right: 0;
  content: "";
  height: 1px;
  background: #666;
  top: 50%;
  z-index: -1;
}

＆＃13;

<h1 class="with-line"><span>Hello</span></h1>

＆＃13;

＆＃13;

＆＃13;