多行虚线或虚线文字 - 下划线

Question

因为CSS文本下划线只允许实线,并且它的位置正好在字符串的底部,所以我使用border-bottom加上一个小填充来实现虚线或虚线文本下划线.

h2{border-bottom:1px dotted #999; padding-bottom:5px;}

现在,问题是,当标题(或段落或任何元素)文本占用2行或更多时,虚线下划线简单地执行每个边框所做的操作,这将保留在块元素的底部.如果我使用文本下划线样式,下划线保留文本,但文本下划线仅支持实线,据我所知,没有填充.

那么如何以虚线或虚线下划线显示多行文本？

谢谢

Answer 1

h2 {
  border-bottom: 1px dashed #999;
  display: inline;
}

所以你得到了你需要的东西.
但你必须记住,<h2>当然(当然)不再是一个块元素.但是你可以"避免",通过把一个<h2>在<div>.

Answer 2

一点点"迟到",但有一种方法可以使用文本装饰风格和文本装饰线来自定义某些浏览器中的下划线.

-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;