html - 标题和字幕前后的偶数行

Question

我想在我的标题上划一行，与我的“副标题”前后的行均匀对齐

我看了两个引用资料:

• Line before and after title over image

• CSS technique for a horizontal line with words in the middle

这些帮助我开始了，但我不确定如何在不换行的情况下获得顶行，即使标题或副标题很长。

<div class="title">
<h1>Testingtesting</h1>
</div>
<div class="sub-title">
<h1>Testing</h1>
</div>

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
h1 {
width: 20%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .1em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .1em;
}
span {
display: inline-block;
vertical-align: middle;
}
.title h1 {
border-top: 1px solid black
}
.title h1:before, .title h1:after {

border-bottom: 0px solid;
}

</style>

Answer 1

你应该使用 white-space: wrap;使用它后它应该可以工作，因为您已经在要设置它的元素上设置了宽度。

例如，

}

.title h1:after {
    content:"\A"; 
    white-space: pre; 
}

解释

在 CSS 中，:after 用于生成一些称为伪元素的内容。如果保留空白，“\A”将被解释为换行符，因此您需要设置 white-space: pre。最后，元素必须是内联的，因此显示:内联。