4

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; }
Depak Chopra
  • 307
  • 2
  • 6
  • What div do you mean? Do you just want the line not to cross the text, but be as you showed on your image? – nicael Mar 29 '15 at 17:40
  • 2
    possible duplicate of [css technique for a horizontal line with words in the middle](http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) – Paulie_D Mar 29 '15 at 17:45
  • create an image with the title and a line layered behind it using GIMP or Photoshop? position that where you would like and change the width, height etc using CSS? – BradleyIW Mar 29 '15 at 17:45
  • @nicael Yes, I just want the line to not cross the text – Depak Chopra Mar 29 '15 at 17:46

5 Answers5

3

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

cnorthfield
  • 3,384
  • 15
  • 22
0

  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>
nicael
  • 18,550
  • 13
  • 57
  • 90
0

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

Alin Mercasi
  • 83
  • 10
  • happy to help, anyway you can simplify your code for second example like this h3.line-behind:after,h3.line-behind:after{/* common code here*/} – Alin Mercasi Mar 29 '15 at 18:17
0

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/

Mo.
  • 26,306
  • 36
  • 159
  • 225
0

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/

Steve
  • 76
  • 3