html - 显示 2 个边框，文本居中

Question

小提琴链接

我需要在 h1 标签后面显示边框，而不是在文本本身后面。还。在中心显示文本。目前，您可以看到“为什么是我们”文本不在中心。或任何其他解决方法来做需要的事情。

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

目前 .lineb 具有灰色边框底部和 .hbord 具有白色边框底部，目前符合我的目的，但不完全是因为“为什么我们”没有居中。

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

演示