How to remove the underline for anchors(links)?

Learn how to remove the underline for anchors(links)? with practical examples, diagrams, and best practices. Covers html, css, underline development techniques with visual explanations.
Tags:
Categories:

How to Remove Underlines from Hyperlinks (Anchors) in HTML and CSS

Hero image for How to remove the underline for anchors(links)?

Learn various CSS techniques to effectively remove the default underline from anchor tags (<a>) in your web projects, improving design and user experience.

Hyperlinks, or anchor tags (<a>), are fundamental to web navigation. By default, browsers render these links with an underline to visually distinguish them from regular text. While this default styling is helpful for accessibility and usability, there are many design scenarios where you might want to remove or customize this underline. This article will guide you through different CSS methods to achieve this, from basic removal to more advanced hover effects.

Understanding the Default Underline

The underline on an <a> tag is a default user agent stylesheet property. Specifically, it's controlled by the text-decoration CSS property. This property is used to set the visual decoration of text, such as underlines, overlines, line-throughs, and blinks. To remove the default underline, we need to explicitly set this property to none for our anchor elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underlined Link Example</title>
    <style>
        /* Default browser styling */
        a {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>This is a <a href="#">default underlined link</a>.</p>
</body>
</html>

Basic HTML with a default underlined link

Method 1: Basic Underline Removal

The most straightforward way to remove the underline is to apply text-decoration: none; directly to the <a> tag in your CSS. This will remove the underline from all links that match your selector.

a {
    text-decoration: none;
}

CSS to remove the underline from all anchor tags

Method 2: Removing Underlines for Specific Contexts

Often, you don't want to remove underlines from all links, but only those within a specific section, like a navigation menu or a footer. You can achieve this by targeting links using their parent elements or CSS classes.

/* Remove underline from links inside a navigation bar */
.navbar a {
    text-decoration: none;
}

/* Remove underline from links with a specific class */
.no-underline-link {
    text-decoration: none;
}

/* Remove underline from links inside the footer */
footer a {
    text-decoration: none;
}

Targeting specific links for underline removal

Method 3: Underline on Hover Effect

A common and user-friendly approach is to remove the underline by default but bring it back when the user hovers over the link. This provides a clean look while still offering a clear visual cue for interactivity.

a {
    text-decoration: none; /* Remove underline by default */
    color: #007bff; /* Example: set a default link color */
    transition: text-decoration 0.3s ease; /* Smooth transition for the underline */
}

a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #0056b3; /* Example: change color on hover */
}

Adding an underline on hover for better user experience

flowchart TD
    A[Link Rendered] --> B{Is it hovered?}
    B -- No --> C[text-decoration: none]
    B -- Yes --> D[text-decoration: underline]
    C --> E[Display Link]
    D --> E

Flowchart illustrating the underline on hover logic

Method 4: Advanced Underline Styling (Custom Underlines)

Instead of the default text-decoration: underline;, you can create more visually appealing custom underlines using properties like border-bottom or box-shadow. This gives you greater control over the underline's thickness, color, and offset.

/* Using border-bottom for a custom underline */
a.custom-underline-border {
    text-decoration: none; /* Remove default underline */
    color: #333;
    padding-bottom: 2px; /* Space between text and border */
    border-bottom: 2px solid #ff6347; /* Custom underline */
}

/* Using box-shadow for a more flexible custom underline */
a.custom-underline-shadow {
    text-decoration: none; /* Remove default underline */
    color: #333;
    box-shadow: inset 0 -2px 0 0 #17a2b8; /* Custom underline via shadow */
    transition: box-shadow 0.3s ease;
}

a.custom-underline-shadow:hover {
    box-shadow: inset 0 -2px 0 0 #0056b3; /* Change color on hover */
}

Creating custom underlines with border-bottom or box-shadow