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

如何制作没有跨度的线交叉中心文本

1 个答案: