remove underline from link css, use the CSS property text-decoration with Best Examples with demo. To remove underline from link with CSS Code By default , links have underlines a link css.

Remove underline from link css

Contents

Syntax:
Remove blue underline from link

text-decoration: none;

remove underline from link css hover & active

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

3 Ways to Insert CSS

External CSS
Internal CSS
Inline CSS

Example: remove underline from link css

.youclassname a {
    color: #FFFFFF;
    text-decoration: none;
}

For Example

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

How to remove underline from a link in HTML?

remove underline from link css

<!DOCTYPE html>
<html>
<head>
   <title>How to remove underline for anchors tag using CSS? - www.pakainfo.com</title>
</head>

<body>
   <h2>About for Pakainfo</h2>
   <p>
      Our <a href="https://www.pakainfo.com/tamilblasters/" style="text-decoration: none;">tamilblasters</a>
      Pakainfo - Web Development & Good Online education
   </p>
</body>
</html>

CSS Link Color Guide With Examples

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

How to remove underline for anchors tag using CSS?

Example 1: remove underline from link css

<!DOCTYPE html>
<html>

<head>
	<title>
		text-decoration property
	</title>
	<style>
		#GFG {
			text-decoration: none;
		}
	</style>
</head>

<body style = "text-align:center;">

	<h2 style = "color:red;" >
		www.pakainfo.com
	</h2>
	
	<h3>Original Link</h3>
	
	<a href = "https://www.pakainfo.com/tamilblasters/">Link 1 tamilblasters</a>
	
	<br>
	
	<h3>removed Underline</h3>
	
	<a id = "PAKA" href = "https://www.pakainfo.com/tamilblasters/">Link 2 tamilblasters</a>
</body>
</html>

Example 2: Use hover property

<!DOCTYPE html>
<html>

<head>
	<title>
		text-decoration property
	</title>
	<style>
		a:link {
			text-decoration: underline;
		}
		a:hover {
			text-decoration: none;
		}
	</style>
</head>

<body style = "text-align:center;">

	<h2 style = "color:red;" >
		remove underline css
	</h2>
	
	<a id = "PAKA" href = "https://www.pakainfo.com/tamilblasters/">tamilblasters</a>
</body>

</html>

Remove Underline from Link

you required to use the CSS text-decoration property.

<p><a href="https://www.pakainfo.com/tamilblasters/">tamilblasters link</a></p>
<p><a style="text-decoration:none;" href="https://www.pakainfo.com/tamilblasters/">tamilblasters</a></p>

Using Classes

remove underline from link html

<style scoped>
.yourclassname a {text-decoration: none;}
</style>

<div class="yourclassname">
<p><a href="https://www.pakainfo.com/tamilblasters/">tamilblasters codes</a></p>
<p><a href="https://www.pakainfo.com/tamilblasters/">tamilblasters tags</a></p>
</div>

text-decoration none not working

a:link{
  text-decoration: none!important;
}

remove underline from link css hover

div.yourclassname-new a:hover{
    text-decoration: none;
}

remove underline from link bootstrap

<a href="https://www.pakainfo.com/tamilblasters/" class="yourclassname">
  <div class="btn-group">
    <button class="btn">tamilblasters</button>
    <button class="btn">tamilblasters</button>
  </div>
</a>

CSS:

.yourclassname {
  text-decoration: none !important
}

Bootstrap 4+

<a href="https://www.pakainfo.com/tamilblasters/" class="text-decoration-none">
    tamilblasters
</a>

how to remove underline from link in html without css?

<a href="https://www.pakainfo.com/tamilblasters/" style="text-decoration: none;"> new link tamilblasters</a>

using jQuery

$(document).ready(function() {

    $("a").css({"text-decoration": "none"});

});

Don’t Miss : Dynamically AddClass CSS Click Using JQuery

Also Read This 👉 Pure CSS custom checkboxes

css link style examples

CSS Styling Links

<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="https://www.pakainfo.com/tamilblasters/" target="_blank" rel="noopener">tamilblasters link</a></b></p>

</body>

four links states

<style>
a:link {
  color: green;
}

a:visited {
  color: black;
}

a:hover {
  color: pink;
}

a:active {
  color: orange;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="https://www.pakainfo.com/tamilblasters/" target="_blank" rel="noopener">tamilblasters link</a></b></p>

Text Decoration

<p><b><a href="https://www.pakainfo.com/tamilblasters/" target="_blank" rel="noopener">tamilblasters link</a></b></p>

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Background Color

<p><b><a href="https://www.pakainfo.com/tamilblasters/" target="_blank" rel="noopener">tamilblasters link</a></b></p>

a:link {
  background-color: green;
}

a:visited {
  background-color: red;
}

a:hover {
  background-color: black;
}

a:active {
  background-color: blue;
}

I hope you get an idea about remove underline from link css.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.