remove underline from link css using text-decoration Best 5 Examples

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

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;
}

remove underline from link css
remove underline from link css

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.