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

Here's my structure:-

<p class="datedAside">4 weeks ago</p>

Answer 1

You can achieve this with pure css using linear gradient as background:

<p class="datedAside">4 weeks ago</p>
<style>
p {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0) calc(50% - 1px), 
        rgba(192,192,192,1) calc(50%), 
        rgba(0,0,0,0) calc(50% + 1px)
    );
}
</style>

https://jsfiddle.net/klesun/aujrkpLk/

Answer 2

Here's one way to do it by adding a span inside the p.

HTML:

<p class="datedAside"> <span> 4 weeks ago </span> </p>​

CSS:

p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}​

DEMO: http://jsfiddle.net/9GMJz/