How to set the underline thickness (html/css)?

Question

The Text underline is too thick (about 3-4 px) in FireFox (in IE it is 1px), if I use the code below

h1 {
COLOR: White;
FONT-WEIGHT: bold;
FONT-SIZE: 30px;
TEXT-DECORATION: underline;
}

How to set the underline thickness to 1 px?

Answer 1

I would use the border property too... like this:

Answer 2

Css Underline Thickness

Answer 3

The underline thickness depends on the font-size of the text. Instead of using text-decoration, why not use border-bottom instead? So in your example:

h1 {
color: White;
font-weight: bold;
font-size: 30px;
border-bottom: 1px solid White;
}

If you don't like the border stretching across the full width of the header, then add display: inline to the styles above.

Answer 4

Use the border-bottom property instead?

border-bottom: 1px solid #000000;