有谁知道如何在文本分为两行的地方创建自定义下划线？
目前我有以下内容:
<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 的解决方案
最佳答案
代码中使用的技巧是使用在 x 方向重复并放置在元素底部的背景图像。因此，对于元素的任何类似 block 的呈现(包括内联 block )，“下划线”仅出现在 block 的底部。
为了使这个技巧在某种意义上对多行内容起作用，您需要使该元素成为内联元素:
h1 { display: inline; }
然后，您需要使用诸如将 h1 元素包裹在 div 容器中并在其上设置垂直边距等方法来创建任何换行符和垂直间距。
关于css - 自定义下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16669220/