How to remove underline from a name on hover

html

responsive-design

css

best-practices

byAnton Shumikhin·Dec 20, 2024

The quickest, dirtiest way to eliminate that pesky underline on hover is to unleash the power of CSS. Define the text-decoration: none for the a:hover state. Pow! Just like this:

a:hover {
    text-decoration: none; // "Underline, be gone!"
}

This itsy bitsy CSS rule right here, my friend, will get rid of underlines for the hover state on all your links.

Rather than going all Rambo on your stylesheet, why not target a specific class? It's easier on the eyes and doesn't mess up your overall aesthetics.

legend.green-color a:hover {
    text-decoration: none; // "You shall not pass, Underline!"
}

This targets anchors within elements with the souped-up legend.green-color class. How Neat is that?!

The nitty-gritty details

So, you've solved your problem, hurray! But let's not stop there. There's a whole lot more going on under the hood when it comes to CSS and anchor tags. Let me explain:

The chameleon effect

If those darn links of yours are not just underlining but also changing colors on hover, you might want to specify your preferred color to keep things in check:

legend.green-color a:hover {
    color: green; // "Stay green, no matter what!"
    text-decoration: none; // "Underline? Not on my watch"
}

Freestyling with inline styles

An inline style attribute on your anchor tags can be your knight in shining armor here. Don't believe me?

<a href="#" style="text-decoration: none;">No Underline On Hover</a>

Now, before you start having all the fun with inline styles, remember, great power comes great responsibility. Inline styles can be, ahem, "fun" to maintain. Stick with external stylesheets, trust me.

Wrestling with CSS specificity

CSS is a tricky business. If your rules are not applying as expected, you might be dealing with CSS specificity. If that's the case, aim for more specific selectors or use a class to strike bullseye:

.my-specific-class a:hover {
    text-decoration: none; // "Gone with the wind, underline!"
}

Visualization

Okay. Enough tech talk. Let's make things easier:

Before you hover, you have a nice wooden plank, static and simple (🟤). When you hover without our rule, you get a line (🖌️), an unwanted decoration. With our CSS rule, the hover is just your plain plank, no change:

[🟤 (normal)] ➡️ [🟤🖌️ (hover)] ➡️ [🟤 (hover with rule)]

You defeated the alien invader (🖌️), good job soldier!

Extra tricks up your sleeve

Let's consider more advanced scenarios; because why not?

Creating custom underlines with pseudo-elements

You're not a fan of ordinary? Well, who's stopping you from creating your own underlines with ::before or ::after pseudo-elements:

a::after {
    content: ''; // "I am currently an invisible man!"
    width: 100%;
    height: 2px;
    background: blue;
    transition: background-color 0.3s;
}
a:hover::after {
    background: transparent; // "I'm going invisible. Bye!"
}

Accessibility matters

When modifying hover states, remember not everyone sees the world in the same colors as you do. Do them a favor:

Use more drastic visual changes than color changes.
Even if you say bye to underline, differentiate links from text via formatting (size, style, etc.)

Give them a smooth transition

Add some smoothness to the hover transformation using text-decoration-color and transition:

a {
    transition: text-decoration-color 0.3s ease-in-out; // "I'm a roller coaster. Weeeee!"
}

a:hover {
    text-decoration-color: transparent; // "I'm invisible on hover. Whoa!"
}