如何使没有跨度的行交叉中心文本[重复]

Question

我想在文本的背面画一条居中的线。我的代码适用于谷歌浏览器，但不适用于 safari 和 IE。有很多关于这方面的教程，但它们都在文本周围有一个跨度。反正有没有跨度画线？ 以下是我的代码：

<h1>Header</h1>

h1{overflow: hidden;text-align: center;}

h1:before, h1:after {position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 2px;
content: '\a0';
background-color: #e6ebfa;}

h1:before {margin-left: -52%; text-align: right;}
h1:after {margin-left: 2%;}

Answer 1

更新

解决方案 1：

演示：http://jsfiddle.net/1cy803ar/36/

CSS：

.title {
    display:block;
    margin:0;
    padding:0;
    text-align:center
}
.title h1 {
    overflow: hidden;
    text-align: center;
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.title h1:before, .title h1:after {
    content:'\a0';
    display:inline-block;
    width:100px;
    height:1px;
    background-color:red;
    line-height:0;
    margin:0 5px;
}

HTML：

<div class="title">
     <h1>Title Header</h1>
</div>

解决方案 2：

是的，演示：http://jsfiddle.net/1cy803ar/9/

CSS：

h1 {
    overflow: hidden;
    text-align: center;
    position:relative; //You missed this.
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 40%; //modified
    height: 2px;
    content:'\a0';
    background-color: #e6ebfa;
}
h1:before {
    left:0;
}
h1:after {
    right: 0;
}