Horizontal Line in Background using Css3 - css

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/

Answer 3

One of the simplest way I know, you can achieve this like this:
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'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.

Answer 5

You could add a pseudo-element to the paragraph selector like so:
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

An alternative with flex and ::before and ::after.
With this solution, you don't need to use a background for the content.
With this HTML markup :
<p class="datedAside"><span>4 weeks ago</span></p>
And this CSS :
.datedAside {
display: flex;
flex-flow: nowrap;
justify-content: space-between;
align-items: center;
}
.datedAside span {
padding: 1em;
}
.datedAside::before,
.datedAside::after {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
content: " ";
height: 0px;
border-bottom: 1px solid black;
}

Answer 7

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.

Answer 8

Another way would be to use the linear-gradient as a background and place it in the middle of the paragraph or div.
p {
background-image: linear-gradient(red, red);
background-size: 100% 1px; /* add your height of the line here*/
background-repeat: no-repeat;
background-position: 50% 50%; /*place it in the middle */
}

Answer 9

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