Search code examples
cssbackgroundborder

Horizontal Line in Background using Css3


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

enter image description here

Here's my structure:-

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

Solution

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