How can I create a line after my text to the width of the container?
Solution 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:
the
<h2>
tag acts as a container for a floated element.the
<span>
is floated left, causing the<hr />
to collapse to the left and fill the right space.the
<hr />
acts as the line, and fills up the remaining space to the right.
Solution 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.
the
<h2>
tag has a class that sets the height to half of the height of the text it contains.the
<h2>
has a bottom border, that extends to the width of it's parent container (since it's a block element).the
<span>
inside of the<h2>
has a white background, which will cover the area where the text and border overlap.And finally, the
<h2>
> has a bottom margin, that compensates for the reduced height of the<h2>
.
Solution 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
Solution 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.
s.bramblet
Updated on June 17, 2022Comments
-
s.bramblet about 2 years
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!
-
s.bramblet over 11 yearsgood solution thx! both you and Axel are on the same wavelength!
-
s.bramblet over 11 yearsthx for this. I do prefer to be able to use a class since it provides a bit more flexibility. This would be the perfect solution, unfortunately my page has a textured background. Would I just need to set the background attribute to my texture in this case?
-
cimmanon over 11 years@user2092975 If you have a texture, there's a good chance it won't line up properly. This method will only work with a solid background.
-
s.bramblet over 11 yearsthx that looked great in your test but didn't work for me. i'm on css 2.1 and trying to maintain compatibility with some older browsers - is 'display:box' a css 3.0 attribute? could i implement this in css 2.1?
-
Leniel Maccaferri over 11 yearsYou don't need that
display
property. Try without it... :) -
Axel over 11 years@user2092975 - I've added another answer, which uses a different technique that should work with textured background images. Check it out ;)
-
s.bramblet over 11 yearsThat's it! Perfect, thanks Axel! I changed the line to match my font colour and adjusted the .line-title hr {margin-top} to 27px to put the line right at the bottom of the font (my font size is 28px) but otherwise this is EXACTLY what I was looking for!