How to Add CSS Underline on Hover

I love cursor hover effects — both making them and seeing them on websites. Even if they’re subtle and minimal, a good hover effect can make a browsing experience that much more enjoyable for visitors.

Are they absolutely necessary? Of course not. But if you want to make your site feel rich and interactive, it’s worth taking some time to master. Plus, they’re fun to learn — I remember first creating hover effects when learning CSS in college, and it made me feel like a pro, I won’t lie.

In this post, we’ll take a look at one type of hover effect: adding an underline to text on hover. This effect is usually seen on page hyperlinks to signal to readers that the selected text is clickable. Specifically, we’ll explore:

• How to Add an Underline on Hover With CSS
• CSS Underline and Accessibility
• CSS Underline on Hover Examples

Let’s get started.

How to Add an Underline on Hover With CSS

If you want to add a basic underline-on-hover effect to a link, it requires just a few lines of HTML and CSS. First, let’s create our text with HTML, a basic anchor (link) element:

Next, we’ll write a couple of CSS rules to achieve the hover effect. Since the anchor element adds an underline to the text by default, we’ll remove this with the text-decoration property:

Lastly, let’s create a CSS rule that takes effect when a cursor hovers over the anchor element. We’ll add another rule and use the CSS pseudo-class :hover. Declarations for a:hover only apply when the anchor link is in the hover state — in other words, when the user’s cursor is positioned over the anchor element.

Now, our hover underline effect should work nicely — here’s the result of the code above, with some extra paragraph text around the anchor element:

Using the anchor element works nicely here too because it automatically adds another hover effect: The cursor changes to a pointer (the hand icon) when hovered over the anchor element. This is another best practice that indicates to users that the element is clickable. I definitely recommend keeping this effect in most cases.

Pretty straightforward, right? Not exactly. The issue with this effect on links is that it creates a challenge for accessibility, which I’ll cover next.

CSS Underline and Accessibility

Removing underlines from links is usually a poor accessibility choice in cases where the link is surrounded by other similar-looking text (e.g., a paragraph). This is because underlines are an established convention of hyperlinks — they’re a visual indicator that the text is a hyperlink.

If a link isn’t underlined, there needs to be another clear visual indicator that the text is clickable. Often, websites resort to changing color, but this is not accessible to users with color vision deficiency, low vision, or other visual limitations who may not be able to distinguish a colored link from non-colored text.

If you want to remove the underline while keeping your links accessible, the Web Content Accessibility Guidelines (WCAG) require that:

1. The color of the link text has a 3:1 contrast ratio with surrounding non-link text.
2. There must be some visual indicator of a link that appears on mouse hover and keyboard focus — WCAG calls this a “non-color designator”. In our case, a non-color designator would be the underline introduced on hover.
3. The pseudo-class :focus is used in addition to :hover. The :focus pseudo-class ensures the underline displays when the <a> element is in focus, for people using keyboard controls to navigate the page.

Below, I’ve recreated the example from the previous version but added the :focus pseudo-class in addition to the :hover pseudo-class.

CSS Underline on Hover Examples

Now let’s look at some examples of underline effects and how you can recreate them yourself.

Apple

For a real-world example of our hover underline effect, look no further than Apple’s website. The links on its main page do exactly what we coded above:

Image Source

Here’s the recreated effect:

Pitchfork

I love how the music news and review website Pitchfork displays its links in articles. In its default state, a link is the same color as surrounding text but has an underline to indicate it’s a hyperlink. When hovered over, the underline disappears and the text fades to red.

Here’s an example from Pitchfork’s review of 1989 by Taylor Swift, who I hear is pretty popular these days:

Image Source

I’ve recreated the effect below using the same trick that we know, but reversed: This time, the underline disappears on hover.

Expanding Underline Effect

This hover effect from @jstn on Codepen takes a different approach. It uses CSS animation to create a block element that expands when a menu item is hovered over. I enjoy the smooth effect that adds flair without being disruptive.

Expanding Underline and Color Change

I like how this example from Tapajyoti Bose incorporates both an expanding underline animation and a color transition effect.

Handwritten Animated Underline

This one really goes above and beyond with its animation. @sharkcoder uses an SVG to simulate a marker stroke that appears below the text. I think this demonstrates impressive creativity, and I could definitely see this technique being applied to a site’s navigation links, for instance.

Create a CSS hover like no other.

As we’ve seen from examples, there’s more than one way to create the CSS underline effect for your page links. Of course, you can get as elaborate as you please, but I’d argue that there is elegance in simplicity.

In my opinion, the goal of this effect shouldn’t be to “wow” users with flair, but rather nudge them toward the desired outcome, be it visiting a particular page or a conversion. But hey, as long as you’re designing for accessibility, who am I to judge?