带有 hr 行的标题答案

【问题标题】：Title with hr line带有 hr 行的标题
【发布时间】：2014-06-16 22:12:23
【问题描述】：

我需要制作简单的标题，但要划线。就像图片上一样：

这是代码：

HTML：

          <div id="intro">
          <div class="bg_big bg_big_green glow"><div id="opac1"><h1>TITLE WITH LINE</h1><p>111</p></div></div>
              <div class="story">
              <div class="float-left">


              </div>
            </div> <!--.story-->


          </div> <!--#intro-->

这里的所有代码：JSfiddle

【问题讨论】：

codepen.io/ericrasch/pen/Irlpm - 许多选项
这很重要。最简单的方法是使用浏览器调试控制台检查截取屏幕截图的原始来源。
这个问题的一些非常好的答案。
使用响应式设计非常棒：stackoverflow.com/a/22603610/2282880
见stackoverflow.com/a/26634224/465233

标签： html css title

【解决方案1】：

这很简单。

首先，给你的容器一个text-align:center，你的标题一个display:inline-block和position:relative。这将使您的标题居中并使其成为一个块。然后，使用::before 和::after 伪元素，在任一侧设置样式和位置线。我发现这是最有益的方法，因为它会根据你的长度定位自己h1。

这是一个清理过的小提琴：http://jsfiddle.net/rgthree/k4Bq4/8/

/* The h1's container */
#opac1 {
  text-align:center;
}
h1 {
    position:relative;
    display:inline-block;
}
h1::before, h1::after {
    content:' ';
    display:block;
    position:absolute; top:50%; left:-120px;
    width:100px; /* 100px line on either side */
    border-bottom:1px solid #FFF;
}
h1::after {
    left:auto; right:-120px; /* make the "after" position on the right side of the h1 */
}

【讨论】：

【解决方案2】：

您应该使用 CSS :before 和 :after 伪类。 Chris Coyier 有一些优秀的 CSS 教程，你可以找到 here

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

这是一个 JSFiddle，显示了一个使用伪类在 header 的任一侧添加一行以达到预期效果的示例。祝你好运！

【讨论】：

【解决方案3】：

Could use some cleaning up, but this might get you started.

基本上我只是使用display 属性。

编辑：我将把它留在这里，因为它仍然是一个选项，但评论中的 Paulie 有一组更好的选项。

【讨论】：