css - 如何: Header with auto width and a background line

Question

首先，对不起标题，我什至不知道如何解释所以我只上传了这张图片:

those are the headers

我需要的是这个，我需要一个宽度为自动(取决于文本)的标题和一条占据其余宽度的蓝线。我以前是这样做的:

<div class="widgettitlewrapper"><h3 class="widgettitle">HEADER2</h3></div>

.widgettitlewrapper {
    background: url("../img/ntitle2.png") repeat-x scroll left center transparent;

}
.widgettitlewrapper h3.widgettitle {
    background: none repeat scroll 0% 0% #FAF8F8;
}

所以我有一条蓝线，在它上面，带有背景的标题覆盖了那部分的线。问题是现在我需要标题是透明的，所以我可以看到这个标题下的行。

我该如何解决这个问题？我正在尝试在 Google 和此处进行搜索，但我什至不知道要搜索什么...

提前致谢。

Answer 1

有一个解决方案，将背景应用到一个 :after 伪元素上:

.widgettitlewrapper {
    clear:both;
    display:table;
    width: 100%;
}
.widgettitlewrapper h3.widgettitle {
    background: none repeat scroll 0% 0% #FAF8F8;
    background:transparent;
     display: table-cell;
    margin: 0;
}

.widgettitlewrapper:after{
    content: '.';
    text-indent: -9999px;
    background-color: red;
    display: table-cell;
    width: 100%;
}

您只需要更改 .widgettitlewrapper:after 元素的背景。

fiddle :http://jsfiddle.net/oadpunpa/