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

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 2

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 3

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 4

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 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;
}