Styling heading with a line - html

Question

In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D

Answer 1

Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here

Answer 2

This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}

Answer 3

I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)