Edit line thickness of CSS 'underline' attribute

Question

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/

There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progress and subject to change. As of January 2020, it is only supported in Firefox and Safari.

The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox only)

---

There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).

Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>