用hr线标题

Question

我需要制作一个简单的标题，但是要越过它。就像在图片上一样：

这是CODE：

• 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

Answer 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 */
}

Answer 2

你应该使用CSS：之前和之后的psuedo类。 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，显示了使用psuedo类在header的任意一侧添加一行以实现所需效果的示例。祝你好运！

Answer 3

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

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

编辑：我将此留在此处，因为它仍然是 选项，但是评论中的Paulie有更好的选项。