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 class="lined"><span>H1 Lined Sample</span></h2>
<h2 class="lined"><span>H2 Lined Sample</span></h2>
<h3 class="lined"><span>H3 Lined Sample</span></h2>

<h1 class="lined lined-double"><span>H1 Double-lined Sample</span></h1>
<h2 class="lined lined-double"><span>H1 Double-lined Sample</span></h2>

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

Answer 2

Artur's solution creates a line however if you increase the px value it becomes clear that the line is still a gradient. This can be fixed by using a start and stop for the middle colour as such:

p {
    background: linear-gradient(to bottom, white calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), white calc(50% + 1px));
}

The line will be double the thickness of the px value given (due to +px -px) so the above gives a horizontal 2px line across the center of the element.