html - css:如何给一个 block 加下划线，而不是它有文本的部分

Question

我想得到以下结果:

________________Title of page

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

知道如何实现吗？我试图将标题包装在 <div> 中, 给它一个白色的背景并将它向下移动一点，所以它与 h1-box 的底部重叠，但是，我不怀疑这是否 100% 跨浏览器。

Answer 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/