tags:

views:

97

answers:

2

Hi,

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

+4  A: 

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
Good thinking +1
spender
The only trouble is that the 'border' underline is a little low, is there any way to address this?
flavour404
Eh? Bottom padding? Can you please show an image of the desired result? I hate guessing what you want.
meder
+1  A: 

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>
No Surprises