How to Underline Text in Html

Before Html 5 was rolled out, you can use the “<u></u>” tag to add underline to text in Html.

Although the “<u></u>” still works in most browsers, it is now depreciated.

The good news is that, there is a simple method to add underline text

Example

Html
<h3 class="underline">underline this text</h3>

1. Using text-decoration to add underline to text in Html

Css
 .underline {
      text-decoration: underline;
    }

Result

2. Using Border Bottom to add underline to text in Html

You can also add underline text by using the border-bottom property in Css.

Example

Html
 <span class="add-underline">underline this text</span> 

Css

 .add-underline {
      border-bottom: 2px solid black;
    }

Result

Notice we use <span> tag instead of a heading tag.

this is because, the heading tag is a block level element and span is an inline level element.

if you use heading or paragraph tag, the underline will reach the end of the screen. but with span, it just add the underline to the width of the text.

Benefit of using border bottom to underline text

With the border bottom, you can specify the color of the underline, you can as well specify the thickness of the underline.

Example

in this example, we want a thick green underline on a blue text, we can achieve this as shown below

Html 
<span class="add-underline">Blue Text with Green Underline</span>

Css
 .add-underline {
      border-bottom: 4px solid green;
      color: blue;
    }

Result

You can as well push the underline down a bit by using the padding bottom property in Css

Html
<span class="add-underline">Blue Text with Green Underline</span>

Css
 .add-underline {
      border-bottom: 4px solid green;
      color: blue;
      padding-bottom: 10px;
    }

Result

There might be other way to do this but, these are just some of the ways to add underline to text in Html,

Hopefully you understand and you also learn how to style buttons in Css here