0

我的 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>

提前感谢您的帮助！

4

2 回答 2

2

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

环绕在它周围的额外<div>（我们称之为）将随着其中的文本在宽度和高度上收缩和增长。也应该显示 和以使它们居中，添加边距/填充并根据文本增长/收缩。.title-container.section-title.title-container.section-titleinline-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元素。

于 2013-10-11T05:27:55.237 回答
1

您不必为此添加另一个框。看看那个工作小提琴

以下是相关的变化。

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

编辑：一条线看起来很难看。

假设标题总是在容器内首先出现，您可以执行类似的操作（同样，无需添加另一个容器）。但请注意，这取决于假设。所以你应该使用类似严峻的解决方案。

于 2013-10-11T08:47:38.950 回答