自定义下划线

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