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

After doing some more research, I think I found the best solution:

h2 {
    color: #F37A1F;
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 25px;
    margin: 0;
    text-transform: uppercase;
}

h2:after {
    background: url("../images/h2.png")  repeat-x center;
    content: " ";
    display: table-cell;
    width: 100%;
}

    h2 > span {
        display: table-cell;
        padding: 0 9px 0 0;
        white-space: nowrap;
    }

Modified from: How can I make a fieldset legend-style "background line" on heading text?

It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.

Answer 2

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.

Answer 3

Here is one way of doing it.

Start with the following HTML:

<h1>News<hr class="hline"></h1>

and apply the following CSS:

h1 {
    background-color: tan;
    display: table;
    width: 100%;
}
.hline {
    display: table-cell;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
}
.hline:after {
    content: '';
    border-top: 1px solid blue;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/

You can repurpose the hr element to add the line after the text.

The advantage here is that you don't have to wrap the text with some other element.

Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.