Home » CSS

How to change link underline color using CSS?

In this tutorial, we will learn how to change the link underline color using CSS? By Apurva Mathur Last updated : July 28, 2023

You may have observed on several websites that all the links are always underlined in that annoying blue color, what if we don't want that blue underline below our links, or what if we want to change the color of that underline then what should we do in cases like these?

Changing the underline color using CSS

By default, the link's underline color is black. To change the link's underline color, you can use the CSS text-decoration-color property by providing the specified color code or color name, you can also use the CSS text-decoration property to remove the underline or change the style of underline.

Syntax

Below is the syntax of the CSS text-decoration-color property to change the underline color:

class_name/selector{
  text-decoration-property: color;
}

Example to change underline color using CSS

In this example, we are changing the underline color and underline styles using the CSS properties.

<!DOCTYPE html>
<html>
  <head>
    <title>
      Remove underline
    </title>
    <style>
      #link2 {
      text-decoration: none;
      }
      #link3 {
      text-decoration-color: limegreen;
      }
    </style>
  </head>
  
  <body style = "text-align:center;">
    <p style = "color:purple;font-size: 30px;font-weight: bolder;font-family: Bahnschrift" >
      Hello eveyone
    </p>
    <h2>Link with blue underline</h2>
    <a href = "#">Hello 1</a>
    <br>
    <h2>Link with no underline</h2>
    <a id = "link2" href = "#">Hello 2</a>
    <br>
    <h2>Link with colored underline</h2>
    <a id = "link3" href = "#">Hello 3</a>
  </body>
</html>

The output of the above example is:

CSS Examples »

How to set Text alignment in HTML using CSS?

How to style a checkbox using CSS?