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

CSS Web Development Front End Technology

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