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

css text element with line behind text on the right

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

图片:

尽管我希望您输入一些代码并向我们展示您的尝试,但以下是一种实现方法。

基本上你创建了一个 after 伪元素,给它一个 1px 的高度和你选择的背景颜色。然后你将它绝对定位在它的 parent 标题元素中,具有较低的 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>