How to Change Link Underline Color using text-decoration-color CSS?


The CSS text-decoration-color is used to change the link color. The underline is set using the text-decoration property. To change the link underline color, the same text-decoration-color property is used.

Syntax

The syntax of CSS text-decoration-color property is as follows −

Selector {
   text-decoration-color: /*value*/
}

Set the Links

To set a link on a web page, we use the <a> element with the href attribute. Add the link in the href attribute −

<p>
   Access our <a href="https://www.tutorialspoint.com/java">Java Tutorial for free</a><br/>
   Access our <a href="https://www.tutorialspoint.com/python">Python Tutorial for free</a> 
</p>

Style the Links

The links are styled here using the text decoration properties −

<style>
	a {
		text-decoration: underline;
		text-decoration-color: orange;
	}
</style>

Underline and set the Link Underline Color

Above, we have used the following two properties to underline a link and change the color −

text-decoration: underline;
text-decoration-color: orange;

Example

Let us see an example to change the link underline color using the CSS text-decoration-color property −

<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: underline;
         text-decoration-color: orange;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>
      Access our <a href="https://www.tutorialspoint.com/java">Java Tutorial for free</a><br/>
      Access our <a href="https://www.tutorialspoint.com/python">Python Tutorial for free</a>
   </p>
</body>
</html>

Updated on: 16-Nov-2023

668 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements