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

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

How about a bottom-border?

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

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

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>

I worked it out. :)

If you use the link inside an li you can then use this type of css:

HTML:

<li><a href="#">Inspiration</a></li>

CSS:

#theMenu li{
    font-weight: 100;
    text-decoration: underline;
    color: red;
    font-size: 0.94em;
}

#theMenu a{
    text-decoration: none;
    font-weight: bold;
}

This will make the line under the link thin, and the link text itself bold.

:)