Horizontal line in background using css3

Question

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

Here is my structure: -

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

Answer 1

Here is one way to do this by adding an interval inside 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/

Answer 2

You can achieve this with pure css using a 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 3

One of the easiest ways that I know you can achieve this as follows:

HTML

 <p>Your text goes here</p> <hr> 

CSS

 p { background: #fff; // or whatever is your bg-color display:inline-block; padding-right: 1em; line-height: 1.2em; } p+hr { margin-top: -0.6em; } 

JSFiddle http://jsfiddle.net/cTMXa/1/

Answer 4

You can do it with a 1% gradient like this

 .datedAside { background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%); } .datedAside span{ background: #FFF; padding: 0 0.5rem; } 

You will add an extra range to the same background color as the background of the component so that it looks like it has "deleted" the line following the text.

Answer 5

You can add a pseudo-element to the paragraph selector, for example:

 p { ::before { border-top: 10px solid #0066a4; content:""; margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 12px; left: 0; right: 0; bottom: 0; z-index: -1; } } 

See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm

Answer 6

The Artur 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 using the start and end for the middle color 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 twice as thick as the given px value (due to + px -px), therefore the above gives a horizontal 2px line through the center of the element.