css 文本元素，右侧文本后面有一行

Question

如何在css中制作这个标题？最好不带 flexbox。

图片：

Answer 1

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

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

可能有更好的方法，也可以使用 flexbox，但根据问题我没有提到。

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

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