Add a line next to a header with CSS

Question

Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:

I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.

I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.

UPDATE:

In the past I've done something like this:

<h1><span>Example Text</span></h1>

h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}

While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.

What I'm really looking for is something like this:

<h1>Example Text</h1> h1 {background-image:url("line.png");} /* but don't appear under the example text */

I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.

Answer 1

You could do something like the following:

HTML

<div class="border">
    <h1>Hello</h1>
</div>

CSS

h1 {
    position: relative;
    bottom: -17px;
    background: #fff;
    padding-right: 10px;
    margin: 0;
    display: inline-block;
}
div.border {
    border-bottom: 1px solid #000;
}

Here is the JsFiddle to the above code.