4

我正在实现一个设计，其中包含语义标题（h3、h4 等）的元素，是全宽块元素，后面是一条垂直居中的水平线，它扩展了标题的整个宽度：

标题

我知道我可以通过将每个标头包装在 a 中<div>并在其后插入另一个块级元素来解决这个问题，但不希望这样污染我的 HTML。我的第一个倾向是::after在标题上使用一个元素，如下所示：

.line-header::after {
    content:'\00a0';
    display: inline-block;
    float: right;
    width: 55%;
    margin-top: -12px;
    border-bottom: 1px solid gray;
}

但是，这需要使::after元素固定宽度，这显然不适用于不同宽度的标题：http: //jsfiddle.net/nbSTf/

关于如何获得一条可变宽度的线条来填充标题右侧的空间，而不在 HTML 中插入额外元素的任何想法？

编辑： Tyriar 在下面的回答（建议在标题后面全宽绘制线条并设置背景颜色以擦除文本后面的线条）提醒我这是在重复的背景图像前面发生的 - 所以没有背景技巧不幸的是可能的。

4

3 回答 3

3

这是您可以使用的一种方法，不幸的是它依赖于一个属性（不一定title），但这可以很容易地用 JavaScript 以编程方式设置。

它使用:before和:after伪元素，:after用于绘制全宽的线条和:before用于在文本后面绘制文本大小的白色背景。伪元素需要z-index正确设置才能以正确的顺序分层。

jsFiddle

示例截图

HTML

<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>

CSS

.line-header {
    margin-top: 15px;
    position:relative;
}
.line-header:before {
    position: absolute;
    display:block;
    top:0;
    left:0;
    bottom:0;
    content: attr(title);
    background-color:#FFF;
    color:#FFF;
    z-index:-1;
    padding-right:.5em;
}
.line-header::after {
    position:absolute;
    content:'';
    display: block;
    left:0;
    right:0;
    top:50%;
    background-color:#555;
    height:1px;
    z-index:-2;
}
于 2013-03-15T01:48:56.273 回答
0

为你的 CSS 试试这个：

编辑：

body { background: red; overflow-x: hidden }

.line-header {
    margin-top: 15px;
    margin-right: 5px;
    display: inline;
    z-index: 100;
    float: left;
    clear: left;
}

.line-header::after {
    position:absolute;
    content:'\00a0';
    width: 100%;
    margin-top: -12px;
    margin-left: 5px;
    border-bottom: 1px solid gray;
    z-index: 0;
}

我只在 Chrome 中测试过这个。这是小提琴。

于 2013-03-15T01:58:29.937 回答
0

那么，反过来呢？画线（以任何你喜欢的方式）然后用于:after插入标题，没有额外的 HTML，但一些额外的 CSS。

HTML

<div id="header1"></div>
<div id="header2"></div>

要画线，只需border-top-style:solid;. 要编写标题，:after.

CSS

div
{
    position:relative;
    border-top-style:solid;
    margin-top:20px; /* just for spacing */
}
div:after
{
    display:block;
    background-color: #FFFFFF;
    position:absolute;
    top:-10px;
    left:0px;
}
#header1:after
{
    content:"Hello;"
}
#header2:after
{
    content:"Hello Again";
}

你会得到这样的东西。

要进行更多自定义，您可以放大字体、更改颜色、添加填充（以获得更多空白），只需更改top适合您的方式即可。

于 2013-03-15T02:32:39.863 回答