css - 当标题为两行长时固定标题后面的行的方法

Question

我的 CSS 已设置，因此我的帖子标题在文本后面有两条红线(该线在文本后面消失)。当标题是一行时效果很好，但是当它进入第二行时，效果有点不稳定。你可以在这里查看:

http://onedirectionconnection.com/2013/08/one-direction-win-song-of-the-summer/

我只希望后面的行移动到 div 的中间，并只显示在标题最长行的末尾(就像上面页面的左侧一样)。

如果有人能帮我弄清楚如何解决这个问题，我将不胜感激。我做了一个 jsfiddle 来帮助这里:http://jsfiddle.net/tC99W/

这是我的 CSS:

.section-title{
    font-family: 'Arvo', serif;
    position: relative;
    font-size: 25px;
    z-index: 1;
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
    text-shadow: #FFF 1px 1px,#ccc 2px 2px;
    background-color: #fff;
}

.section-title:before, .section-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 3px solid #DA5969;
    border-top: 1px solid #DA5969;
    box-sizing: content-box; /* + vendor specific versions here */
}
.section-title:before {
    margin-left: -52%;
    text-align: right;
}
.section-title:after {
    margin-left:2%;
    text-align:left;
}

HTML:

<h1 class="section-title">The Title Goes Here</h1>

提前感谢您的帮助!

Answer 1

您需要一个 <div>在你的 .container 之间和你的 .section-title还有这个<div>应该有 :before和 :after类似于您已经完成的伪类。

额外的<div> (我们称之为 .title-container )环绕 .section-title将随着其中的文本在宽度和高度上收缩和增长。也都是 .title-container和 .section-title应显示为 inline-block为了使它们居中，添加边距/填充并根据文本增大/缩小。

我还从 .section-title 中移除了一些 CSS 规则至 .title-container

查看更新后的 jsfiddle:http://jsfiddle.net/grim/tC99W/3/ ，这样理解起来可能更容易一些。

编辑:将线扩展到容器的边缘:
这是另一个更新的 jsfiddle:http://jsfiddle.net/tC99W/10/

基本上你应该让 .title-container展开所以它不应该是 inline-block而是一个block元素。边框也应该更宽(我放了 width: 50%; 但实际上有点长)。最重要的部分是玩z-index标题和 :before和 :after元素。