Edit line thickness of CSS 'underline' attribute

Here is one way of achieving this :

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

​CSS :

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}​

Here is an example: http://jsfiddle.net/AQ9rL/


Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:

.custom-underline{
  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.

Plus: various colors, thickness and underline position

Minus: can not use on non-solid backgrounds

Here I made couple of examples: http://jsfiddle.net/xsL6rktx/