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

The underline bold problem seems due to the Arial font. But your exemple/solution works for me (Firefox 18). — Nicolas, Feb 04 '13 at 10:03
Possible duplicate of [How to change underline thickness of an a-tag without using border?](http://stackoverflow.com/questions/34047471/how-to-change-underline-thickness-of-an-a-tag-without-using-border) — Zach Saucier, Jan 08 '17 at 23:42

score 9 · Accepted Answer · answered Oct 21 '09 at 01:19

9

How about a bottom-border?

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

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

answered Oct 21 '09 at 01:19

meder omuraliev

183,342
71
393
434

1

The only trouble is that the 'border' underline is a little low, is there any way to address this? – flavour404 Oct 21 '09 at 02:18
1

Eh? Bottom padding? Can you please show an image of the desired result? I hate guessing what you want. – meder omuraliev Oct 21 '09 at 02:25
1

`text-decoration:underline` or `` should add an underline to the text's *baseline*, allowing letters like `p` and `g` to have their descenders drop below the underline. Adding a border to the bottom adds a border below the descenders, which is too low to be a proper text underline. – Jez Dec 07 '14 at 13:12

score 3 · Answer 2 · answered Oct 21 '09 at 01:38

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>

score 2 · Answer 3 · answered Jan 06 '12 at 22:37

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.

:)

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

3 Answers3