Question

我想在标题的左侧和右侧放置一条黑线，所以它看起来像：

--------------------漂亮的文字------------------------- -

内容bla bla blab内容bla bla blab内容bla
内容bla bla blab内容bla bla blab内容bla
内容bla bla blab内容bla bla blab内容bla
内容bla bla blab内容bla bla blab内容bla

希望你知道我的意思。

最好的方法是什么？我可以通过给h1设置负顶部位置和白色背景来实现这一点，同时在内部设置div，顶部带有黑色边框。因此标题（带有白色背景）覆盖了我的黑色边框。

但我确信有一种比使用负面定位更好的方式。

Answer 1

你可以在绝对位置和负边距中使用伪元素： 基本单行版本：

http://codepen.io/gc-nomade/pen/FzjiD/

h1 {
  margin:0 1em;
  position:relative;/*here triggers overflow since no width is given */
  overflow:hidden;
  text-align:center;
}
h1:after , h1:before{
  content:'';
  margin-top:0.5em;
  height:0;
  border-top:groove 2px;
  width:100%;
  position:absolute;
  margin-right:-100%;/* reduce size virtually to zero at 100% */
  margin-left:1%;/* set margin from end  text */
}
h1:before{
  margin-left:-101%;/* reduce size virtually to zero at 100% + give margin from begin text */
}

对于多行专线：

http://codepen.io/gc-nomade/pen/uLynl/ 你需要设置top coordonates以保持垂直中间; 并将文本换行到内联框以不覆盖它。 http://codepen.io/gc-nomade/pen/qhEro/

Answer 2

不确定这是否是最佳方式，但这肯定是实现这一目标的简单方法：

HTML代码：

<hr class="headingrule" /><span id="heading">text</span><hr class="headingrule" />

CSS代码：

.headingrule {
    float: left;
    width: 40%;
}

#heading {
    float: left;
}

JSFiddle

Answer 3

http://fiddle.jshell.net/MF4WP/4/
http://fiddle.jshell.net/MF4WP/4/show

<h1><span>My heading has a line through it.</span></h1>

需要额外的跨度。也适用于多行标题：
见这里的例子：
http://fiddle.jshell.net/aZ4tr/6/show
http://fiddle.jshell.net/aZ4tr/6/

 h1 {
    color: gray;
    font-size: 0; /* fixes white-space issue SPAN */
    font-family:Helvetica;
    text-align: center;
    display: block;
    padding: 0 10px;
    position: relative;
}
h1:before {
  content: '';
  height: 1px;
  width: 100%;
  background: gray;
  position:absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  margin-top: -1px;
}
h1 span {
    background: #fff;
    display: inline-block;
    font-size: 28px;  
}

黑色线条左右两边的文字

3 个答案: