Horizontal Line in Background using Css3

Question

How to implement this type of style to text using only css3, means a horizontal line in the middle of the tag... Can it be possible using pure css...

Answer 1

I was update from fork for my solution.

http://jsfiddle.net/0f9catjy/

Html Block

H1 Lined Sample
H2 Lined Sample
H3 Lined Sample

H1 Double-lined Sample
H1 Double-lined Sample

Css Block

/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 2.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

h1.lined, h2.lined, h3.lined, h4.lined, h5.lined, h6.lined
{
    font-family: sans-serif;
    position: relative;
    text-align: left;
    z-index: 1;
}

h1.lined:before,
h2.lined:before,
h3.lined:before,
h4.lined:before,
h5.lined:before,
h6.lined:before
{
        border-top: 2px solid #dfdfdf;
        content: "";
        margin: 0 auto;
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 95%;
        z-index: -1;
    }

h1.lined span,
h2.lined span,
h3.lined span,
h4.lined span,
h5.lined span,
h6.lined span
{
        background: #fff;
        padding: 0 15px;
    }

h1.lined-double:before, 
h2.lined-double:before, 
h3.lined-double:before, 
h4.lined-double:before, 
h5.lined-double:before, 
h6.lined-double:before
{
        border-top: none;
    }

h1.lined-double:after,
h2.lined-double:after,
h3.lined-double:after,
h4.lined-double:after,
h5.lined-double:after,
h6.lined-double:after
{
    border-bottom: 1px solid blue;
    -webkit-box-shadow: 0 3px 0 0 red;
    -moz-box-shadow: 0 3px 0 0 red;
    box-shadow: 0 3px 0 0 red;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
    right: 0;
    width: 95%;
    z-index: -1;
    transform: translateY(calc(-50% + 3px));
}
/** END
 * Horizontal Type Line Behind Text
 */