How to remove underline for anchors tag using CSS?
The anchor tag is used to define the hyperlinks and it display underlined anchor part by default. The underline can be easily remove by using text-decoration property. The text-decoration property of CSS allows to decorate the text according to requirement. By setting the text-decoration to none to remove the underline from anchor tag.
Syntax:
text-decoration: none;
Example 1: This example sets the text-decoration property to none.
<!-- HTML code to remove underline from anchor tag --><!DOCTYPE html> <html> <head> <title> text-decoration property </title> <!-- text-decoration property to remove underline from anchor tag --> <style> #GFG { text-decoration: none; } </style></head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3>Original Link</h3> <a href = "#">Link 1</a> <br> <h3>removed Underline</h3> <a id = "GFG" href = "#">Link 2</a> </body> </html> |
Output:
Example 2: Use hover property to remove underline when mouse move over the anchor part.
<!-- HTML code to remove underline from anchor tag --><!DOCTYPE html> <html> <head> <title> text-decoration property </title> <!-- text-decoration property to remove underline from anchor tag --> <style> a:link { text-decoration: underline; } a:hover { text-decoration: none; } </style></head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksforGeeks </h1> <a id = "GFG" href = "#">GeeksforGeeks Anchor Part</a> </body> </html> |
Output:
Before Mouse move over:
After Mouse move over:
Please Login to comment...