html - 中央にテキストを含む2つの境界線を表示します

Question

フィドルリンク

h1タグの後ろに境界線を表示する必要がありますが、テキスト自体の後ろには表示しません。また。テキストを中央に表示します。現時点では、「Whyus」のテキストが中央にないことがわかります。または、必要なことを行うための他の回避策。

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

現在、.linebには灰色のborder-bottomがあり、.hbordには白いborder-bottomがあります。これは現時点では私の目的に役立ちますが、「なぜ私たち」が中央に配置されていないため、完全ではありません。

Answer 1

これを試して

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

デモ