css：如何下划线一个块，但不是它有文本的部分答案

【问题标题】：css: howto underline a block, but not the parts where it has textcss：如何下划线一个块，但不是它有文本的部分
【发布时间】：2012-02-29 16:12:33
【问题描述】：

我想得到以下结果：

________________页面标题

假设 html 标记为 <h1>Title of page</h1>，h1 设置为 width:100% 和 text-align:right，我希望它只在标题左侧加下划线。

任何线索如何做到这一点？我试图将标题包装在<div> 中，给它一个白色背景并将其向下移动一点，因此它与 h1 框的底部重叠，但是，我不知道这是否 100% 交叉-浏览器。

【问题讨论】：

标签： html css underline

【解决方案1】：

替代解决方案：

<div style="width:100%;float:left;border-bottom:1px solid">
 <h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>

http://jsfiddle.net/VMCax/1/

【讨论】：

哇，真快。非常感谢大家！特别感谢 MCSI :)
关于 :before 伪元素解决方案：如果您无法预测实际标题正确的时间长度，它们不是很灵活？
没错，Mixhael，如果你的标题分成多行，它也会提出这个解决方案的问题，这只会为最后一行创建下划线效果（除非你写了多个标题标签考虑休息）
请不要只发布 jsfiddle 的链接，在此处也发布内容。
虽然您的解决方案效果很好，但我遇到了一个奇怪的问题。这可能是由于与其他 CSS 声明的冲突。但是，如果您查看我的网站（正在进行中）：guerrillabyt.es，您会看到该行为每个菜单项向上滑动一个像素。在第一个菜单项上它完全对齐，但在第四个（似乎）有 3 个像素的差异。有什么线索吗？

【解决方案2】：

只要该行对显示内容并不重要，您就可以试试这个，因为它支持 IE8+。

h1:before{content:"________________"}

jsfiddle here

【讨论】：

【解决方案3】：

看起来你正在尝试做的事情会更好地实现一个包装容器和一个浮动里面。使内部 div（或浮动 h1）具有白色背景。使外部 div 具有与文本 div 的 line-height 相同的间距的重复 (repeat-y) 背景。

确保包装 div 尊重浮动 div（overflow:hidden 或在浮动末尾有一个清晰的 div。

这将为您提供您正在寻找的效果，并且应该也适用于多行标题。

【讨论】：

【解决方案4】：

我会使用 CSS 生成的内容，带有不间断的空格和下划线：http://jsfiddle.net/JMVUa/1/

h1:before{
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
    text-decoration: underline;
}

【讨论】：

你的方法和我的有什么不同吗？
是的，下划线字符可能看起来不像“真正的”下划线。但无论如何，这个解决方案并不是 Mixhael 想要的。