CODEWITHSUNDEEP
cssbackgroundborder
SaurabhLP
SaurabhLP

Reputation: 3655

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>

Upvotes: 21

Views: 61698

Answers (9)

anka
anka

Reputation: 3857

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

Upvotes: 5

Sedat Kumcu
Sedat Kumcu

Reputation: 2440

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

Upvotes: 0

Neekobus
Neekobus

Reputation: 2038

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

Upvotes: 6

awjh
awjh

Reputation: 161

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.

Upvotes: 5

1FlyCat
1FlyCat

Reputation: 383

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

Upvotes: 6

Klesun
Klesun

Reputation: 13747

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/

Upvotes: 46

Rob Lucha
Rob Lucha

Reputation: 115

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.

Upvotes: 7

tb11
tb11

Reputation: 3106

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/

Upvotes: 14

micadelli
micadelli

Reputation: 2482

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/

Upvotes: 8

Related Questions