Is there a way to make HTML underscore thicker?

Question

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

Answer 1

This will give you control over the U tag:

 <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 do not recommend inline CSS, but used it here for brevity:

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

Answer 3

No no. The thickness of the underline is browser dependent and cannot be affected in CSS (or HTML).

In CSS3 Text, the text-underline-width property has been proposed. But this was not enough interest, and he was excluded from the project in 2005. It was probably never implemented.

The usual workaround is to use a lower border instead of underlining. However, note that this is a completely different matter. The lower border is below the line of the line, while the underline is usually found in the source text and, therefore, shortens the letter descriptors. As a rule, the lower bound is better for readability than underlining, but it differs from the 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 do not always want border-bottom (for example, an element can be indented, and it will be displayed too far), this method works best:

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

If you need a thicker underline, add another height

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

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