How to Change Link Underline Color using text-decoration-color CSS
The CSS text-decoration-color is used to change the color of text-decoration-line.
Syntax
The syntax of CSS text-decoration-color property is as follows −
Selector {
text-decoration-color: /*value*/
}Example
The following examples illustrate CSS text-decoration-color property.
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: gray;
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: violet;
}
</style>
</head>
<body>
<p>
Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
</p>
</body>
</html>This gives the following output
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
div, a {
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: green;
}
</style>
</head>
<body>
<div>
Underlined demo text.
<a href=#>Hyperlink here!</a>
</div>
</body>
</html>This gives the following output
Published on 10-Feb-2021 18:20:36
