In CSS, how can I make a vertically centered line which takes up the remaining horizontal space after a block element? - html

Question

I am implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.

Answer 1

Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}

Answer 2

Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.

Answer 3

Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.