multi line dotted or dashed text-underline

Question

Because CSS text underline only allows a solid line and its position is right at the bottom of strings, I'm using border-bottom plus a little padding to achieve dotted or dashed text underline.

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

now, the problem is, when the heading (or paragraph, or whatever element) text takes 2 lines or more, the dotted underline simply does what every border does, which is stay on the bottom of the block element. If I use text-underline style, the underline stays with the text, but text-underline only supports a solid line, and as far as I know, no padding.

So how do I display multi line texts with dotted or dashed underline ?

Thanks

Answer 1

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

So you receive what you need.
But you have to keep in mind that <h2> is then (of course) no longer a block element. But you can "avoid" that by putting a <h2> in a <div>.