How to fill remaining space in div with pseudo elements?

Question

I'm trying to make a h2 element with a line in a background, but only in the remaining space. I know the simplies way is to use span inside H2, but user will generate content by WYSIWIG, so I can't use additional elements in h2. I tried many things with :before and :after, but with no success. Maybe someone dealt with this before and came up with clever idea?

Answer 1

You can do this with the pseudo element :

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