How to Add Underline to Text in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

Use text-decoration Property: Set text-decoration to underline to add an underline to the text.
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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog