Skip to content
Related Articles

Related Articles

How to change the underline color in CSS?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 25 May, 2021
View Discussion
Improve Article
Save Article

Styling is implemented to HTML text to make it catchy and attractive. The text can be made italic, underline, and bold as per requirement.

  • Underline tag: To change the color of the underline, we need to add some styling using CSS (inline/internal/external). By default, the color of the underline is black. In CSS, we will use text-decoration property to style underline.

    Syntax:

    <u> Some Text Here </u>
  • CSS text-decoration-color Property: This property is used to specify the color of decorations (overlines, underlines, and line-throughs) over the text.

    Syntax:

    text-decoration-color: color | initial | inherit ;

Below examples illustrate the approach of changing the underline color by CSS

Example 1:

HTML




<!DOCTYPE html>
<html>
<body
    <u style="text-decoration-color:red">
      Geeksforgeeks A Computer 
      Science Portal for Geeks
    </u>
</body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      u {
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h2>
      Geeksforgeeks
      <u>A Computer Science Portal for Geeks</u>
    </h2>
  </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!