November 5, 2022

How to Change Color of Link After Clicking on it in HTML and CSS

In this tutorial, we will learn how to change color of link after clicking on it in HTML and CSS. When you are styling the link on a webpage, you want to change the default color of a link after clicking on it to make it easier for the users to navigate.

By default the visited link color is purple and underlined, but it’s very easy to change the visited link color by using CSS :visited pseudo-class selector and color property.

In the following example, we have a link and upon clicking, we will change its color. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have one anchor element with a 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>Color change of link after clicking on it</title>
    <link rel="stylesheet" href="./style.css">
</head>

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

</html>

CSS
We are selecting the anchor element with CSS :visited pseudo-class selector and setting the CSS color property value to green. As a result, it will change the default visited link color to green after clicking on it.

a:visited {
    color: green;
}

You May Also Like: