1

有没有办法使用 CSS 在标题旁边显示一行？这是我正在谈论的图像：

我可以使用静态背景图像来完成，但这需要为每个标题自定义 CSS。而且我可以在 上使用:after和背景颜色做一些 hacky 的东西h1，但它不会在渐变背景下看起来正确。

我想用 CSS 做这个，而不是 JavaScript。如果它在旧浏览器中不起作用，那很好。

更新：

在过去，我做过这样的事情：

<h1><span>Example Text</span></h1>

h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}

虽然这样可行，但它很hacky，而且它不适用于渐变背景，因为它span必须具有纯色背景。

我真正想要的是这样的：

<h1>Example Text</h1> h1 {background-image:url("line.png");} /* but don't appear under the example text */

我:after在原帖中说错了，我在想我过去遇到的另一个问题。

4

3 回答 3

2

您可以执行以下操作：

HTML

<div class="border">
    <h1>Hello</h1>
</div>

CSS

h1 {
    position: relative;
    bottom: -17px;
    background: #fff;
    padding-right: 10px;
    margin: 0;
    display: inline-block;
}
div.border {
    border-bottom: 1px solid #000;
}

这是上述代码的JsFiddle 。

于 2013-11-25T17:04:08.970 回答
1

在做了更多的研究之后，我想我找到了最好的解决方案：

h2 {
    color: #F37A1F;
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 25px;
    margin: 0;
    text-transform: uppercase;
}

h2:after {
    background: url("../images/h2.png")  repeat-x center;
    content: " ";
    display: table-cell;
    width: 100%;
}

    h2 > span {
        display: table-cell;
        padding: 0 9px 0 0;
        white-space: nowrap;
    }

修改自：如何在标题文本上制作字段集图例样式的“背景线”？

不幸的是，它仍然需要一些额外的标记，但这是我发现的最小的。我可能会写一些 jQuery 来span自动添加到h2s.

于 2013-11-25T18:23:03.643 回答
-1

这是一种方法。

从以下 HTML 开始：

<h1>News<hr class="hline"></h1>

并应用以下 CSS：

h1 {
    background-color: tan;
    display: table;
    width: 100%;
}
.hline {
    display: table-cell;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
}
.hline:after {
    content: '';
    border-top: 1px solid blue;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

参见演示：http: //jsfiddle.net/audetwebdesign/Dsa9R/

您可以重新调整hr元素的用途以在文本之后添加行。

这里的优点是您不必用其他元素包装文本。

注意：您可以重写 CSS 选择器并避免声明类名并节省一些输入。

于 2013-11-25T17:42:04.860 回答