<h1><span>Example Heading</span></h1>

h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}

<h1>
    <span>Test</span>
    <hr>
    <div class="end"></div>
</h1>

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; }

<div class="title">
    <div class="title1">TITLE</div>
</div>

.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
}

<div class="heading-wrapper">
    <h1>Example Heading</h1>
    <img src="line.png" width="193" height="6" alt="" />
</div>

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 */
}

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);
}