Friday, January 17, 2025
HomeTechRemove blue underline from link

Remove blue underline from link

To remove the blue underline from a link in HTML using CSS, you can modify the default behavior of anchor (<a>) elements by setting the text-decoration property to none. By default, links are styled with an underline, and removing it can be done with this simple CSS rule.

Here’s an example:

Example of Removing Blue Underline from Links

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remove Blue Underline from Link</title>
    <style>
        /* Remove the blue underline from links */
        a {
            text-decoration: none;
            color: inherit; /* Optional: removes the default blue color */
        }

        /* Optional: styling the link when hovered */
        a:hover {
            color: #ff6347; /* Change color on hover (for example, tomato) */
        }
    </style>
</head>
<body>

    <a href="https://www.example.com">This is a link with no underline</a>

</body>
</html>

Explanation of the CSS:

  • text-decoration: none;: This removes the underline that is applied by default to anchor (<a>) elements.
  • color: inherit;: This ensures that the link adopts the color of its parent or surrounding elements (you can customize the color here if you like).
  • Optional a:hover: You can also define how the link behaves when hovered over (e.g., changing its color).
See also  Linear Programming Definition, Formula, Examples

Conclusion:

By applying text-decoration: none; to anchor tags, you can remove the blue underline. Additionally, you can customize the color and other styles as needed to suit your design.

RELATED ARTICLES
0 0 votes
Article Rating

Leave a Reply

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
- Advertisment -

Most Popular

Recent Comments

0
Would love your thoughts, please comment.x
()
x