Html 在CSS中，如何制作一条垂直居中的线，它占据块元素后剩余的水平空间？

我正在实现一种设计，其中包含语义上为标题（h3、h4等）的元素，是全宽块元素，后面是一条垂直居中的水平线，该线延伸标题的全宽a la：

我知道我可以通过将每个标题包装成

并在其后面插入另一个块级元素来解决这个问题，但我不希望这样污染我的HTML。我的第一个倾向是在标题上的元素之后使用

：：如下：

.line-header::after {
    content:'\00a0';
    display: inline-block;
    float: right;
    width: 55%;
    margin-top: -12px;
    border-bottom: 1px solid gray;
}

但是，这需要将
：：after
元素设置为固定宽度，这显然不适用于不同的宽度标题：

关于如何获得一个可变宽度的行来填充标题右侧的空间，而不在HTML中插入额外的元素，有什么想法吗

编辑：Tyriar在下面的回答（建议在标题后面画全宽的线条，并设置背景色以擦除文本后面的线条）提醒我，这是在重复的背景图像前面发生的-因此不幸的是，不可能有背景技巧。
这里有一种方法可以让你做到这一点，不幸的是，它依赖于一个属性（不一定是
title
），但这可以通过JavaScript通过编程轻松设置

它使用
：before
和
：after
伪元素，
：after
用于绘制全宽线条，
：before
用于绘制文本大小的文本后面的白色背景。伪元素需要将其
z-index
正确设置为按正确顺序分层



HTML

为您的CSS尝试以下方法：

编辑：

body { background: red; overflow-x: hidden }

.line-header {
    margin-top: 15px;
    margin-right: 5px;
    display: inline;
    z-index: 100;
    float: left;
    clear: left;
}

.line-header::after {
    position:absolute;
    content:'\00a0';
    width: 100%;
    margin-top: -12px;
    margin-left: 5px;
    border-bottom: 1px solid gray;
    z-index: 0;
}

我只在Chrome上测试过这个
 那么，反过来做怎么样？画线（以任何你喜欢的方式），然后使用
：在
之后插入标题，不需要额外的HTML，而是一些额外的CSS

HTML

<div id="header1"></div>
<div id="header2"></div>

您将得到类似于的结果

要进行更多的定制，您可以放大字体、更改颜色、添加填充（以获得更多的空白），只需更改
top
它适合您的方式。
您的方法给我留下了深刻的印象，我不知道发生了什么。我玩过它，显然它可以在没有包装的情况下很容易地打破
。行标题
仍然，很好的解决方案：）这是一个有趣的解决方案-但是，即使在Tyriar的小提琴中，包装div将“宽度：100%”限制在合理的范围内，如果您滚动到结果窗格的右侧，水平线仍然是相同的宽度，较长标题的水平线被推到了更远的右侧-与我遇到的问题相同，但相反。：）我需要它们在包含元素的右侧边缘对齐。“我遗漏了什么吗？”埃里克·P《我的小提琴》展示了一个反例，而不是一个补丁。此外，溢出-x可能还不够。只有当内容不在页面中央并且不需要在右边填充时，这才有效。我不明白你说的。您只需要在包含标题的任何内容上使用overflow-x:hidden即可。只要该容器可以接受overflow-x:hidden，那么我不明白为什么这不是一个有效的解决方案。还有一种情况是，标题由一个div容器包装，该容器的宽度设置在浏览器的中心。@JacobVanScoy如果可以，请将答案改为使用#容器而不是正文。谢谢，Tyriar-我最初看到的是类似这样的东西，但不幸的是，标题后面的背景是一个重复的图像，它否定了背景技巧。我将对问题进行编辑以澄清这一点。
body { background: red; overflow-x: hidden }

.line-header {
    margin-top: 15px;
    margin-right: 5px;
    display: inline;
    z-index: 100;
    float: left;
    clear: left;
}

.line-header::after {
    position:absolute;
    content:'\00a0';
    width: 100%;
    margin-top: -12px;
    margin-left: 5px;
    border-bottom: 1px solid gray;
    z-index: 0;
}

<div id="header1"></div>
<div id="header2"></div>

div
{
    position:relative;
    border-top-style:solid;
    margin-top:20px; /* just for spacing */
}
div:after
{
    display:block;
    background-color: #FFFFFF;
    position:absolute;
    top:-10px;
    left:0px;
}
#header1:after
{
    content:"Hello;"
}
#header2:after
{
    content:"Hello Again";
}