Edit line thickness of CSS 'underline' attribute

Question

Since you can underline any text in CSS like so:

h4 {
    text-decoration: underline;
}

How can you also then edit the \'line\' that is drawn

Answer 1

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/

Answer 2

You can do it with a linear-gradient by setting it to be like this:

h1, a {
    display: inline;
    text-decoration: none;
    color: black;
    background-image: linear-gradient(to top, #000 12%, transparent 12%);
}

<h1>I'm underlined</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="https://stackoverflow.com">veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</a> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

And, yes, you can change it like this...

var m = document.getElementById("m");
m.onchange = u;
function u() {
    document.getElementById("a").innerHTML = ":root { --value: " + m.value + "%;";
}

h1, a {
    display: inline;
    text-decoration: none;
    color: black;
    background-image: linear-gradient(to top, #000 var(--value), transparent var(--value));
}

<h1>I'm underlined</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="https://stackoverflow.com">veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</a> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style id="a"></style>
<input type="range" min="0" max="100" id="m" />

Answer 3

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/

Answer 4

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>

Answer 5

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).

Answer 6

The background-image can also be used to create an underline. This method handles line breaks.

It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>