Question

Fiddle Link

I need to display border behind a h1 tag but just not behind the text itself. Also. display the text in center. At the moment you can see “Why us” text is not in center. Or any other work around to do what is needed.

<div  class="lineb"><h1 class="hbord">What <span>we</span> can do</h1><div class="cls"></div></div>

Currently .lineb has grey border-bottom and .hbord has white border-bottom which serves my purpose at the moment but not completely as the “why us” is not centered.

Answer 1

Try this

HTML

<h1 class="one"><span>Heading Number One</span></h1>
<h1 class="one"><span>Heading Number One</span></h1>​

CSS

 h1 {
    position: relative;
    margin-top: 20px; text-align: center; 
    font-size:25px
  }

  h1.one { margin-top: 0; }

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

DEMO