The default color of a link underline is the same as the link text which is blue in all the browsers. However, we can very easily get rid of this default blue color and define our own custom colors.
To change the color of a link underline you can use the text-decoration-color property. The text-decoration-color property lets you specify the color of the underline in all color formats such as color name, RGB, HEX, HSL, etc.
The following example changes the color of the links’ underline to orange:
Example:
a{
text-decoration-color: orange;
}
You can also specify the color of the link underline in other standard color formats such as HEX, RGB, HSL, etc.
In the following example, we have defined the color of the link underline using a hex color value:
Example:
a{
text-decoration-color: #12d3ef;
}
You can also use the above concept to change the link underline color on the hover. To do that you have to simply use the :hover selector with the text-decoration-color property.
In the following example, the link underline color changes from blue to red as soon as you hover over the link:
Example:
a:hover{
text-decoration-color: red;
}
