How can I create a line after my text to the width of the container?

Question

Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.

Something like this:

This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container

I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.

Here's what I've tried:

CSS:

.line
{
    display:inline-block;
    border-bottom:2px #5B3400 solid;
    margin-left:5px;
    width:80%;
}

HTML:

    <h2>Our Mission<span class="line"></span></h2>

Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?

I know this should be easy but I haven't been able to find a solution yet.

Thanks!

Answer 1

THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):

You can try using this method instead, if your <h2> is on top of a background image.

HTML:

<h2 class="line-title"><span>This is my title</span><hr /></h2>

CSS:

.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}

See the working example here: http://jsfiddle.net/yYBDD/1/

How it Works:

1. the <h2> tag acts as a container for a floated element.

2. the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.

3. the <hr /> acts as the line, and fills up the remaining space to the right.

Answer 2

THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:

HTML:

<h2 class="line-title"><span>This is my title</span></h2>

CSS:

.line-title {
    border-bottom: 1px solid #DDD;
    font-size: 20px;
    height: 12px;
    margin-bottom: 10px;
}

.line-title span {
    background: #FFF;
    padding-right: 10px;
}

You can see a working example here: http://jsfiddle.net/yYBDD/

How it works.

1. the <h2> tag has a class that sets the height to half of the height of the text it contains.

2. the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).

3. the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.

4. And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.

Answer 3

You could use flexbox to do this.

http://jsfiddle.net/eHHep/ (prefixes not included)

<h1 class="lineme">This is my header</h1>

<h2 class="lineme">This is another header</h2>

.lineme {
    display: flex;
}

.lineme:after {
    display: block;
    content: " ";
    border-bottom: 1px solid;
    flex: 1 1 auto;
}

Advantages over other methods:

• No extra markup required
• Background color is not required

Down side:

• Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
• Your line goes away if your text wraps around

Answer 4

HTML:

<h2><span>Our Mission</span></h2>

CSS:

h2{
    border-bottom: 1px solid #000;
    height: 20px;
    overflow: visible;
    display: block;
    width: 100%;
}

h2 span{
    display: inline-block;
    background: #fff;
    height: 21px;
}

This way it'll overflow on the bottom border as it has bigger height.

Demo: http://jsfiddle.net/afuzk/

Answer 5

Here's something I tried and that worked:

HTML

<h2>Our Mission</h2>

CSS

h2:after
{
    content:       "\00a0";
    border-bottom: solid 2px black;
    position:      fixed;
    top:           0;
    width:         100%;
    margin-left:   3px;
}

The JS Bin to test: http://jsbin.com/ayuvuc/4