CODEWITHSUNDEEP
css
Depak Chopra
Depak Chopra

Reputation: 317

How to get a headline to have a horizontal line behind the text?

I'm constructing a site and a piece of the mockup is below

enter image description here

Since I'm using a content management system that builds the HTML, all I have to work with a single h3 tag. I want the line behind to have the width of the div containing the h3 tag. Is this possible?

Here's the closest that I can get: http://jsfiddle.net/rmgtq6h6/

h3.line-behind { width: auto; position: relative; text-align: center}
    h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: 1; }

Upvotes: 5

Views: 4087

Answers (5)

Steve
Steve

Reputation: 106

Simple answer using grid:

h1 {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: center;
    gap: 0.5rem;
}

h1:before,
h1:after {
    content: '';
    height: 1px;
    background-color: #CBD5E1;
}

https://jsfiddle.net/6cq5whgr/

Upvotes: 3

Mo.
Mo.

Reputation: 27465

We can build is easily with these guaranties 👇

  • No images
  • No extra
  • HTML Scalable (that is, you could add larger text and it automatically sizes to fit)
  • Fluid
  • No JavaScript

Method 1: A Pseudo-Element

h1:before {
    content:"";
    display: block;
    border-top: solid 1px black;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
}
h1 span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

Demo: http://jsfiddle.net/7s79zwz5/

Method 2: Adjacent Sibling Selector

h1+p {
    border-top: solid 1px black;
    padding-top: 40px;
    margin-top: -40px;
}

Demo: http://jsfiddle.net/v9g3d4ua/

Method 3: Linear Gradient

h1 {
    background: -moz-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #ffffff), color-stop(50%, #000000), color-stop(51%, #000000), color-stop(52%, #ffffff), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: -o-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
}

Demo: http://jsfiddle.net/2m30vsgm/

Upvotes: 0

Alin Mercasi
Alin Mercasi

Reputation: 83

if i understand correctly this is what are you looking for 

    h3.line-behind:after {
     position:absolute;
  content:'';
  height:2px;
  width:150%;
  top:50%;
  transform:translateY(-50%);
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
  background: linear-gradient(to right, rgba(25,25,25,0) 0%,
                                        rgba(25,25,25,1) 35%,
                                        rgba(255,255,255,0) 36%,
                                        rgba(255,255,255,0) 65%,
                                        rgba(25,25,25,1) 66%,
                                        rgba(25,25,25,0) 100%);}

fiddle here

or another example more practical add another pseudo-element ::before

h3.line-behind:after { position:absolute;
  content:'';
  height:2px;
  width:50%;
  top:50%;
  transform:translateY(-50%);
  left:0;
  transform:translateX(-50%);
  z-index:-1;
  background: #000; }
h3.line-behind:before {position:absolute;
  content:'';
  height:2px;
  width:50%;
  top:50%;
  transform:translateY(-50%);
  right:0;
  transform:translateX(50%);
  z-index:-1;
  background: #000; }

demo here

Upvotes: 0

cnorthfield
cnorthfield

Reputation: 3501

Here you go:

https://jsfiddle.net/rmgtq6h6/1/

div.line-behind {
  width: auto;
  position: relative;
  text-align: center
}
span {
  content: " ";
  border-top: 3px solid black;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: -1;
}
h3 {
  background-color: #fff;
  display: inline-block;
}
}
<div class="line-behind"><span></span>
  <h3>Begin My Giving Journey</h3>
</div>

Or take a look here:

http://codepen.io/ericrasch/pen/Irlpm

Upvotes: 3

nicael
nicael

Reputation: 18995

  1. Place you text in some container

  2. center this text

  3. apply some width to the container

  4. give the container some background color

h3.line-behind { width: auto; position: relative; text-align: center}
    h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: -1; }
#container{
   
    margin:0 auto;
    background-color:white;
    width:40%;
}
<h3 class="line-behind"><div id="container">Begin My Giving Journey</div></h3>

Upvotes: 0

Related Questions