Css 如何在没有跨距的情况下使线跨中心文本

我想在文本的背面画一条中心线。我的代码在google chrome上运行，但在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%;}

标题
h1{溢出：隐藏；文本对齐：居中；}
h1：之前，h1：之后{位置：绝对；
最高：51%；
溢出：隐藏；
宽度：50%；
高度：2倍；
内容：'\a0'；
背景色：#e6ebfa；}
h1:在{左边距：-52%；文本对齐：右边距；}之前
h1:在{左边距：2%；}之后

更新

解决方案1:

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

演示：

CSS:

HTML:

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

---

谢谢你，KK。但它在IE和Safari上只有一句正确的话，我忘了提到，我的代码是在firefox chrome上运行的，而不是在IE和Safari上运行的。在ie和safari上，只有右行。您需要分别为：before和：after伪元素提供左值和右值。你也可以参考这个Hi KK：再次感谢。我试过左右。但问题是标题不是固定宽度，我可能会在其他较长的标题上使用它。就像这样：我在想，到底是不是有什么东西可以把之前和之后隐藏起来？@KK是的，现在可以了，谢谢你，老兄

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;
}