DEV Community

Cover image for How to Remove Underlines From Links with CSS
Coderslang: Become a Software Engineer
Coderslang: Become a Software Engineer

Posted on • Originally published at learn.coderslang.com

How to Remove Underlines From Links with CSS

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>
Enter fullscreen mode Exit fullscreen mode

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 it. Quite simple, right?

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

Discussion (0)