October 12, 2022

How to Change Hyperlink Underline Color in HTML and CSS

In this tutorial, we will learn how to change hyperlink underline color in HTML and CSS. HTML links are hyperlinks, as you are likely aware, and by clicking one, you can access another one. The href attribute on the anchor element represents a hyperlink.

By default, the hyperlink underline color is blue, but you can change it if you want to. It is very easy to change the hyperlink underline color with the use of the CSS text-decoration property and color property.

In the following example, we will demonstrate how you can change the hyperlink underline color using CSS. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have one anchor element with href attribute.
In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyperlink underline color change</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <a href="https://www.youtube.com/">youtube</a>
</body>

</html>

CSS

We are selecting the anchor element and setting the CSS font-size property to 30px to increase the size of the text.
The text-decoration property value has been set to none, and the color property value has been set to red. As a result, it will change the default hyperlink underline color to red.

a {
    font-size: 30px;
    text-decoration: none;
    color: red;
}

You May Also Like: