Show underlines only on mouse hover by using CSS in HTML

In this tutorial, we are gonna turn off the underline of a link and show it only on mouse hover. The browser shows the underline on a text link by default. First, we need to turn it off by styling it. First, just add text-decoration: none; To show it on mouse hover, add a:hover. Then inside the double curly brackets, add text-decoration: underline;

<!DOCTYPE html>
<html>
<head>

   <style>
           a {
             text-decoration: none;
 }

       a:hover {
             text-decoration: underline;
 }
    </style>

</head>
<body align="center" style="font-size: 100px;">

        <a href="#">This is a link</a>

</body>
</html>