添加一行与CSS头旁边(Add a line next to a header with CSS)

是否有显示旁边使用CSS头线的方法吗？ 下面是我在谈论的图像：

我可以用一个静态背景图片做，但会要求每一个标题自定义CSS。 而我所能做的使用一些哈克的东西:after和背景颜色上的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}

虽然这样的作品，它的哈克，它不与渐变背景很好地工作，因为span必须有一个坚实的背景颜色。

我真正寻找的是这样的：

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

我说错有关:after在原岗位的事情，我在想另一个问题，我在过去的。

Answer 1:

你可以做类似如下：

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到上面的代码。

Answer 2:

做一些调查研究后，我想我找到了最好的解决办法：

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自动给h2秒。

Answer 3:

下面是做这件事的一种方式。

先从下面的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选择器，避免声明类名和节省一点打字。

文章来源: Add a line next to a header with CSS