如何用伪元素填充div中的剩余空间？

Question

我正在尝试在背景中创建一个带有直线的h2元素，但仅限于剩余的空间。 我知道简化方法是在H2中使用span ，但用户将通过WYSIWIG生成内容，因此我无法在h2中使用其他元素。我尝试了很多东西：之前和之后，但没有成功。也许有人之前处理过这个并提出了聪明的想法？

Answer 1

您可以使用伪元素执行此操作：

<强> FIDDLE

<div id="content">
    <h2>Example title</h2>
    <p>.. content ..</p>
    <p>.. content ..</p>
    <h2>Example longer title</h2>
    <p>.. content ..</p>
    <p>.. content ..</p>

</div>

CSS

#content {
    position:relative;
    width:500px;
    margin:0 auto;
}
h2 {
    display:inline-block;
    background:#fff;
    padding-right:20px;
    line-height:1.2em;
}
h2:after {
    content:"";
    position:absolute;
    margin-top:0.6em;
    width:100%;
    left:0;
    height:2px;
    background:blue;
    z-index:-1;
}