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