Is there any way to make the HTML underline thicker?

Question

I have a centered div with a nested h1 inside. Is there any way to underline it with a thicker line than the html default?

Answer 1

This will give you control over the U tag's underline:

<style type="text/css">
  u {
    text-decoration: none;
    border-bottom: 4px solid black;
  }
</style>

In this case the underline will be four pixels.

Answer 2

I am not recommending inline CSS but have used it here for brevity:

<h1 style="border-bottom: 5px solid black">

Answer 3

No, there isn’t. The thickness of the underline is browser-dependent and cannot be affected in CSS (or HTML).

There was once a text-underline-width property suggested in the CSS3 Text draft. But there was insufficient interest in it, and it was removed from the draft in 2005. It was probably never implemented.

The usual workaround is to use a bottom border instead of an underline. However, note that it is a different thing. The bottom border is below the line box, whereas an underline is normally on the baseline of text and therefore cuts descenders of letters. Generally, a bottom border is better for legibility than an underline, but it deviates from typographic tradition.

The following example demonstrates the differences.

<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>

Answer 4

You may be able to achieve the same visual effect with border-bottom-width;

h2
{
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:15px;
}d

Answer 5

Since you don't always want border-bottom (eg, item may have padding and it will appear too far away), this method works best:

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

If you want a thicker underline, add more height

If you want more or less space between the text and the underline, add a margin-top:

h1:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}