How to change the underline color in CSS?
Last Updated :
05 Jun, 2023
In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value.
Styling is implemented in 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 ;
The 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...