css - 自定义下划线

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容器中并在其上设置垂直边距等方法来创建任何换行符和垂直间距。