CSS underlined text where the underline is of a lesser weight than the text?

Question

Trying to underline a header, but have it as a much thinner line than the bold text above it, how do I do this?

From 'googling' the answer it sais that this should work (but it doesn't):

<span style="text-decoration:underline; font-weight:normal;">
    <span style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:16pt;">
       Basic Transfer
    </span>
 </span>

So just to recap, big text, thin underline, how?

Or more to the point, where am I going wrong?

Thanks, R

Answer 1

How about a bottom-border?

<h2 style="border-bottom:1px solid #000;">basic transfer</h2>

Of course you shouldn't be using inline-css.

Answer 2

meder's answer is a good general approach, but be careful: for h2 and other block elements, using a border to simulate an underline won't quite work. If the text wraps, only the bottom edge of the bounding box will be underlined. Even if it doesn't, the border will extend to the right past the end of the text. You need to wrap the text in a span and style the span.

<h2><span style="border-bottom:1px solid #000;">basic transfer</span></h2>