首先，对不起标题，我什至不知道该怎么解释，所以我上传了这张照片：
我需要的是，我需要一个带有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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句