In CSS, how can I make a vertically centered line that occupies the remaining horizontal space after a block element?

Question

I am implementing a project that contains elements that are semantic headers (h3, h4, etc.), are full-width block elements, followed by a vertically centered horizontal line that extends the entire width of the header a la

I know I could take care of this by wrapping each title in a <div> and inserting another block level element after it, but would prefer not to pollute my HTML. My first goal was to use the ::after element in the headers, for example:

 .line-header::after { content:'\00a0'; display: inline-block; float: right; width: 55%; margin-top: -12px; border-bottom: 1px solid gray; } 

However, this requires creating a fixed width for the ::after element, which obviously does not work with headers of different widths: http://jsfiddle.net/nbSTf/

Any ideas on how to get a variable-width string that fills the space to the right of the title without inserting extra elements into the HTML?

EDIT: Tyriar's answer below (suggesting to draw the line width behind the heading and set the background color to erase the line behind the text) reminded me that this happens before a repeating background image - so, unfortunately, background tricks are not possible.

Answer 1

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 tested this only in Chrome. Here is the fiddle .

Answer 2

Here is the way you could do this, unfortunately, it relies on an attribute (not necessarily a title ), it could be easily set programmatically using JavaScript.

It uses the aliases :before and :after :after used to draw a line with a full width, and :before used to draw a text size with a white background behind the text. Pseudo-elements need their z-index to set the layer correctly 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 3

Well, how about doing it the other way around? Draw the lines (anyway you like), then use :after to insert the headers, additional HTML, but some additional CSS.

HTML

 <div id="header1"></div> <div id="header2"></div> 

To draw a line, simply border-top-style:solid; . To record 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 will get something like this .

For more customization, you can enlarge the font, change colors, add padding (for more spaces), just change top as it suits you.