Creating Underline text in HTML (With or Without CSS)

: 7431

Last Updated : 20/07/2022

Posted By :- vikas_jk

In this article, we will providing you an example to create text with underline using HTML and CSS and using plain HTML also. Using Underlines below text, we can bring attention of our readers. But we should use underline text with caution, as generally underlined text in websites are links.

We can create Underlined text in HTML in two ways

Using CSS, text-decoration property
Using <u> HTML tag inside <p> or <div>
Using "border-bottom" in CSS

Let's take a look at both ways, with examples, one by one.

Underline Text using plain HTML

You can simply use <u> tag in HTML to underline the text.

For example:

<h2> <u> This h2 is underlind. </u> </h2>

You will see output as below

Now, as you see this is very simple approach to underline the text, but I think it would be much better to use CSS. Why?

Because using CSS, you can have better control over this underlined text.

You can change color of underline, using CSS you can also change style of underline.

Underline Text using CSS

As mentioned, above we have better way to underline text which is done using CSS's "text-decoration" property, which gives more control over underline styling, color etc.

<h2> <u> This is underlined using the u tag. </u> </h2>
<p class="firstUnderline"> This is underlined using CSS text-decoration </p>
<p class="SecondUnderline">  One more Using CSS text-decoration complete </p>
<p class="ThirdUnderline">  One more Using CSS text-decoration-line.</p>
<p class="UnderlineOverline">  One more Using CSS but this time overline also. </p>

CSS

.firstUnderline{
  text-decoration:underline
  
}

.SecondUnderline{
  text-decoration:underline wavy green
  
}
.ThirdUnderline{
  text-decoration-line:underline;
}
.UnderlineOverline{
  text-decoration: underline overline;
}

Output:

Fiddle

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

text-decoration-line (required)
text-decoration-color
text-decoration-style

In the above examples, we are using all ways to underline text using CSS, using text-decoration short hand property or using text-decoration-line property.

One of the drawbacks of using text-decoration is you can not change thickness of underline.

So, if you want to underline text and modify it's thickness also, you can "border-bottom" CSS property, which allows us to modify thickness of underline also.

Underline using "border-bottom" CSS property

HTML

<p>
  <span class="simpleUnderline">Underlined using Border-bottom</span>
</p>

<p>
  <span class="Dottedunderline">Dotted underline with 5px height</span>
</p>

<p>
  <span class="simpleUnderline underline--blue">Wrapping text across lines</span>
</p>

CSS

.simpleUnderline {
  border-bottom: 2px solid currentColor;
}

.Dottedunderline{
  border-bottom: 5px red dashed;
}
.underline--blue {
  border-bottom-color: blue;
}

Fiddle Output:

That's it, this is how you can create underline text in HTML.