How to Add Underline to Text in CSS

Introduction

Adding an underline to text in CSS is simple and enhances the emphasis of important content. The text-decoration property is used to apply an underline to any text element.

Problem Statement

Create a CSS code that:

  • Adds an underline to text using the text-decoration property.
  • Demonstrates how to customize the underline style.

Example:

  • Input: A paragraph element with the text "Underline Example".
  • Output: The text appears with an underline applied.

Solution Steps

  1. Use text-decoration Property: Set text-decoration to underline to add an underline to the text.
  2. Customize the Underline: Use different values for text-decoration to control the style (e.g., color, thickness).

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underline Text Example</title>
    <style>
        /* Step 1: Add underline to text */
        .underline-text {
            text-decoration: underline;
        }

        /* Step 2: Customize the underline color and style */
        .custom-underline {
            text-decoration: underline;
            text-decoration-color: red;
            text-decoration-thickness: 2px;
        }
    </style>
</head>
<body>

    <p class="underline-text">This text is underlined using text-decoration: underline.</p>
    <p class="custom-underline">This text has a custom underline with color and thickness.</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use text-decoration: underline

  • To add an underline to text, use this CSS code:
    .underline-text {
        text-decoration: underline;
    }
    

Step 2: Customize the Underline

  • To customize the underline color and thickness, use this CSS code:
    .custom-underline {
        text-decoration: underline;
        text-decoration-color: red;
        text-decoration-thickness: 2px;
    }
    

Conclusion

Adding an underline to text in CSS is easy using the text-decoration property. You can also customize the style by adjusting the underline color and thickness to fit your design needs.

Comments

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare