You know how hyperlinks always come with an underline, right? And you want to get rid of it so you can add your style. Well, you can do it by using the text-decoration property.

text-decoration is a CSS property that will specify how to decorate the text. Since the hyperlink by default has a decoration, all you have to do is remove the text-decoration from the link.

An example code

Let us take an example of how to remove underline with the text-decoration property.

<!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>Example</title>
  </head>
  <body>
    <a href="#">Definitely not a clickbait</a>

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

As shown from the example code above, the text-decoration: none; basically tells the CSS not to have any decoration on the hyperlink. That means the hyperlink no longer has an underline.

And that is pretty much of it. Quite simple, right?

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript