How to Add CSS Underlining on Hover

I love hover effects – whether they are light and simple or distinctive, a hover effect can make the browsing experience more enjoyable for visitors.

How to Add Underline on Hover Using CSS

If you want to add a simple underline effect when hovering over a link, it only requires a few lines of HTML and CSS. First, let’s create our text using the anchor element:

<a href=”#”>This is some linked text</a>

Then, we will write some CSS rules to achieve the hover effect. Since the anchor element adds an underline to the text by default, we will remove that using the text-decoration property:

a { text-decoration: none; }

Finally, let’s create a CSS rule that applies when the cursor is over the anchor element. We will add another rule and use the pseudo-class :hover in CSS. The declarations for a:hover apply only when the anchor tag is in the hover state – in other words, when the user’s pointer is over the anchor element.

a:hover { text-decoration: underline; }

Now, the underline effect on hover should work well – here is the result of the above code with some additional paragraph text about the anchor element:

Using the anchor element works well here too, as it automatically adds another hover effect: the cursor changes to a pointer (hand) when hovering over the anchor element. I highly recommend keeping this effect in most cases.

Underline Effect and Accessibility

Removing the underline from links is usually a bad choice in terms of accessibility in situations where the link is surrounded by similar unlinked text (for example, a paragraph). This is because underlining is a recognized convention for links – it is a visual indicator that the text is a link.

If the link is not underlined, there should be another clear visual indicator that the text is clickable. Often, websites resort to changing the color, but this is not available to users who have color blindness or low vision or other visual impairments that may not allow them to distinguish the colored link from the uncolored text.

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

1. The link text color must have a contrast ratio of 3:1 with the surrounding unlinked text.
2. There should be some visual indicator for the link that appears when hovering the mouse and focusing on the keyboard – WCAG calls this a “non-color indicator”. In our case, the non-color indicator will be the underline that appears on hover. The pseudo-class :focus is used in addition to the pseudo-class :hover. The pseudo-class :focus ensures that underlining appears when the anchor element is in focus, for people who use keyboard controls to navigate the page.

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

Examples of Underline on Hover Using CSS

Let’s take a look at some examples of the underline effect and how you can recreate it yourself.

Apple

To look at a real example of the underline effect on hover, let’s check out Apple’s website. The links on the homepage do exactly what we programmed above:

Pitchfork

I love how Pitchfork, the music news and reviews site, displays its links in articles. In its default state, the link is the same color as the surrounding text but has an underline to indicate that it is a link. Upon hovering, the underline disappears and the text fades to red.

Expanded Underline Effect

This effect from @jstn on Codepen uses CSS animation to create a box element that expands when hovered over a list item. I enjoy the smooth effect that adds a touch of elegance without being distracting.

Effect

Expanded Underline and Color Change

I love how this example by Tapajyoti Bose combines both the expanded underline effect and the color change effect.

Handwritten Animated Underline Effect

This example really takes it further with its animated effect. @sharkcoder uses SVG to simulate ink pouring beneath the text. I think this showcases impressive creativity, and I can see this technique applied to navigation links on a site, for example.

As we’ve seen from the examples, there is more than one way to create an underline effect using CSS for your page links. Of course, you can be as creative as you want, but I think there’s elegance in simplicity.

In my opinion, the goal of this effect should be to guide users toward the desired outcome, whether that be visiting a specific page or a conversion. But, as long as you design for accessibility, it’s hard for me to judge.

Source: https://blog.hubspot.com/website/css-underline-on-hover