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，以便将它们居中，添加边距/填充以及根据文字增长/缩小。

我还将一些CSS规则从.section-title移到.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元素。

Answer 2

您不必为此添加另一个框。看一下Working Fiddle

以下是相关更改。

.section-title:before, .section-title:after {
    position: absolute;
    top: 40%;
    height: 4px;
    width: 4%;
    content: '';
    border-bottom: 3px solid #DA5969;
    border-top: 1px solid #DA5969;
}
.section-title:before {
    left:0;
}
.section-title:after {
    right:0;
}

编辑：用一行看起来很难看。

假设标题始终位于容器内部，您可以执行That之类的操作（同样，不添加其他容器）。但请注意，这取决于假设。所以你应该使用像grim的解决方案。

当标题是两行长时，修复标题后面的行的方法

2 个答案: