自定义下划线

Question

有谁知道如何在文本分成两行的地方创建自定义下划线？

目前我有以下：

<h1 class="title" id="page-title">Title goes here</h1>

h1 {
display: inline-block;
zoom: 1;
line-height: 1.4em;
background-image: url(../img/underline.png);
background-repeat: repeat-x;
background-position: left bottom;
}

问题是当线条变长并换行时，你只会得到一个下划线。

见JSFiddle

正在寻找一种适用于 IE8 的解决方案

Answer 1

代码中使用的技巧使用了在 x 方向上重复并放置在元素底部的背景图像。因此，对于元素的任何块状渲染（包括内联块），“下划线”仅出现在块的底部。

为了使这个技巧在某种意义上有效，对于多行内容，您需要使元素成为内联元素：

h1 { display: inline; }

然后，您需要使用诸如将h1 元素包装在div 容器中并在其上设置垂直边距等方法来创建任何换行符和垂直间距。