This content originally appeared on DEV Community and was authored by Coderslang: Become a Software Engineer
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 it. Quite simple, right?
Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript
This content originally appeared on DEV Community and was authored by Coderslang: Become a Software Engineer
Coderslang: Become a Software Engineer | Sciencx (2021-09-21T13:39:37+00:00) How to Remove Underlines From Links with CSS. Retrieved from https://www.scien.cx/2021/09/21/how-to-remove-underlines-from-links-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.