我想在中心标题之前和之后创建一行。线条和文字必须具有透明背景才能将其放置在不均匀的背景上。该行不能为100％宽度，如下所示：
h1 {
text-align: center;
border-bottom: 1px solid #000;
}
<h1>Today</h1>
解决方法
您可以使用两个伪元素和边框在标题的两边做一行：
>这个工作在一个透明的背景(线条和标题有透明的背景)。
>线长度将适应标题宽度，因此无论标题长度如何，它们始终处于同一位置。
>标题可以跨越几行，而左和右线保持垂直居中(请注意，您需要将标题包含在< span>标签中才能工作。请参阅演示)
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://i.imgur.com/EzOh4DX.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
font-family: 'Open Sans',sans-serif;
}
h1 {
width: 70%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #fff;
}
h1:before,h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
span {
display: inline-block;
vertical-align: middle;
}
<h1>Today</h1> <h1>Today news</h1> <h1><span>Today<br/>news</span></h1>
