css - 如何让标题在文本后面有一条水平线？

Question

我正在构建一个站点，下面是一个模型

因为我使用的是构建 HTML 的内容管理系统，所以我必须使用单个 h3 标记。我希望后面的行具有包含 h3 标记的 div 的宽度。这可能吗？

这是我能得到的最接近的值: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; }

Answer 1

给你:

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>

或者看看这里:

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