Skip to content
Related Articles

Related Articles

Improve Article

How to change the underline color in CSS?

  • Last Updated : 25 May, 2021

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 :