How to Underline Text in CSS?

How to Underline Text in CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 3 mins read

In this tutorial, we will learn how to underline text in CSS using different techniques. Underlining text is often used to emphasize certain words or phrases, or to indicate links. By the end of this tutorial, you'll be able to apply underlining to your text using various CSS methods.

Using the text-decoration Property

The simplest and most common way to underline text in CSS is by using the text-decoration property. This property can be used to apply various styles to text, including underlining.

Here's an example of underlining text using the text-decoration property:

<!DOCTYPE html>
<html>
  <head>
    <title>Text-decoration Example</title>
    <style>
      p {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>This text is underlined.</p>
  </body>
</html>

In the example above, we've set the text-decoration property to underline for the <p> element, which underlines the text within the element. Below is a live example:

See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.

Using the border-bottom Property

Another method to underline text in CSS is by using the border-bottom property. This approach provides more control over the appearance of the underline, such as its thickness, style, and distance from the text.

Here's an example of underlining text using the border-bottom property:

<!DOCTYPE html>
<html>
  <head>
    <title>Border-bottom Example</title>
    <style>
      p {
        display: inline; /* Required for border-bottom to work with block elements */
        border-bottom: 2px solid black;
      }
    </style>
  </head>
  <body>
    <p>This text is underlined using border-bottom.</p>
  </body>
</html>

In the example above, we've set the display property to inline and applied a border-bottom style to the <p> element, which underlines the text within the element.

Customizing the Underline Style

You can further customize the appearance of the underline using various CSS properties.

Changing the Underline Color

To change the underline color, use the text-decoration-color property along with the text-decoration property.

Example:

p {
  text-decoration: underline;
  text-decoration-color: red;
}

The example above sets the underline color to red.

Changing the Underline Style

To change the underline style, use the text-decoration-style property along with the text-decoration property.

Example:

p {
  text-decoration: underline;
  text-decoration-style: dashed;
}

The example above sets the underline style to dashed.

FAQs

Q: Can I underline only part of the text within an element?

A: Yes, you can use the <span> element to underline specific parts of the text within an element. Apply the desired CSS style to the <span> element to underline the text within it.

Q: How do I remove the underline from a link?

A: By default, links are underlined in most browsers. To remove the underline from a link, set the text-decoration property to none for the <a> element.

Q: Can I create a double underline using CSS?

A: Yes, you can create a double underline using the text-decoration-style property. Set the property value to double along with the text-decoration property set to underline.