multi line dotted or dashed text-underline

Because CSS text underline only allows a solid line and its position is right at the bottom of strings, I'm using borde开发者_运维问答r-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

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>.

A "bit" late, but there's a way with text-decoration-style and text-decoration-line to customize the underline in some browsers.

.underline-dashed {
  decoration-line: underline;
  decoration-style: dashed;
}

Example:

.underline-dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

This is some <span class="underline-dashed">dashed underlined</span> text.

I was also facing similar issue but with <a> tags. In my case it was css float property that was causing the border to appear only under the last line. So I enclosed the <a> tags with <span> tags and moved the css float:left to <span>. It fixed the issue now bottom border appears under all the lines whenever a long link is wrapped to fit the containing div.

The revised css style and HTML structure is as follows:

  a { border-bottom:1px dotted red; }
  span.nav-link { float:left; }

<span class="nav-link"><a href="some-page">Test link</a></span>

Hope it helps someone.

Thanks,

text-decoration: underline dotted;
text-decoration: underline dashed;