Add A Line Next To A Header With CSS

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

Solution 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.

Solution 2:

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.

Solution 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.