How to use the text-decoration on :hover Pseudo-class In CSS
Using this method to visually remove the underline is by setting the border-bottom property to none. This approach allows for more customization of the link’s appearance.
Example: Implementation to remove the underline of a link.
HTML
<!DOCTYPE html><html lang="en"><head> <title> Remove Underline from Link with text-decoration using CSS </title> <style> body { text-align: center; } a:hover { text-decoration: none; } .no-underline:hover { text-decoration: none; } </style></head><body> <p> Welcome to <a href="https://www.w3wiki.org"> w3wiki </a> </p> <p> <a href="https://www.w3wiki.org" class="no-underline"> w3wiki </a> is a computer science portal </p></body></html> |
Output:
How to Remove the Underline of a Link in CSS ?
To remove the underline from links in CSS, use the text-decoration: none; property. We can apply this to the ‘a' selector to target all anchor elements, which are typically used for links. This simple declaration will remove the underline from all links on your webpage.
Table of Content
- Using the text-decoration Property
- Using the text-decoration on :hover Pseudo-class