css - 如何:具有自动宽度和背景线的标题

首先，对不起标题，我什至不知道该怎么解释，所以我上传了这张照片：

those are the headers

我需要的是，我需要一个具有width auto的标题（取决于文本），以及一条带有剩余宽度的蓝线。我是这样做的：

<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和此处进行搜索，但我什至不知道要搜索什么...

提前致谢。

最佳答案

有一个解决方案，将背景应用于：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元素的背景。

小提琴：http://jsfiddle.net/oadpunpa/