没有文本部分的CSS标题下划线

Question

也许这已经得到了回答,但我没有找到适合我的问题的解决方案.

好的,这里是:

h3对于实际文本所在的部分,我需要为100%EXCEPT标记下划线.像这样:

我的超级头衔____________________________________________________

这必须是100%的宽度,所以像

h3:after {
        content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}

固定数量的空格不起作用.

标签也必须是纯净的.这意味着它没有被DIV或span等包围......(用户提交的内容来自wysiwyg)它只是一个h3标签.

这在css3中是否可行？如果不是,我愿意添加一些j来使它工作.

更新:

这是一个预期结果的屏幕截图:

Answer 1

你可以这样试试:

标记

<h3>A 100% wide title</h3>

CSS

h3 {
  display: block;
  width: 100%;
  background: #fff;  
  white-space: nowrap;
  overflow: hidden;
}

h3:after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: .5em;
  border-bottom: 1px #767676 solid;
}

示例:http://cdpn.io/Awpef

产生的效果