5 ways to make sliding underlined links
Tags: css, webdev
Published: 2020-10-14 03:44:42

---
title: 5 ways to make sliding underlined links
published: true
date: 2020-09-12 00:00:00 UTC
tags: css, webdev
canonical_url: https://nerdcowboy.com/blog/sliding-underlined-links/
description: Good looking UIs receive a perceived usability bump. However, that doesn't mean we should be sacrificing usability in order to make the design as pretty as possible.
---

Underlined links are as old as the web itself. The underline gives affordance to users that it will link somewhere else. By default, all links are underlined and that's good enough for a lot of websites.

However, adding a little bit of motion to an underline can create a delightful micro-animation that can help bring your website to life. (did I buzzword right?)

## Recreating the underline

![Example of basic underline](https://nerdcowboy.com/static/606d4ea98876f91c03eddf5f62ead254/1f083/basic-underline.png)

Before we dive into the underline transitions, first we need to re-create the native anchor underline.

To get started, we'll add color to the link to help denote that it's a link and we'll get rid of the native underline so we can set our own.

```css
a {
  color: saddlebrown;
  text-decoration: none;
}
```

From here, we could use an absolutely positioned pseudo-element (i.e. `::before`) to achieve the same effect we want. However, absolute positioning will only display an underline on a single line, so I can't recommend going that route unless you're using this for something that you're confident won't ever be more than a single line.

So the only other option for creating a multi-line underline is using the `background` property. Since you can't change the size or positioning of `background-color`, we need to use `background-image`. I repeat the same color in the gradient as I'm trying to make the background a solid color, but you can definitely spice things up by making it a real gradient.

```css
a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
}
```

With the gradient set, it will make the entire anchor's background to the color/gradient we specify, so we'll need to change its size and position to make it look like an underline.

We'll set the `background-size`'s width to `100%` and the height to `0.1em`—we use an em here as it will proportionally scale the underline if the text size changes.

Set `background-position-y` to `100%` to place the underline to the bottom of the anchor, making it look like an underline.

We'll also throw a transition in there so we can animate our underlines later.

```css
a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-x: 0%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}
```
[Edit on CodePen](https://codepen.io/nerdcowboy/pen/MWyOxOY)

## 1. Slide in and back

![Example of slide in and back underline effect](https://nerdcowboy.com/6b1581f30a02ff871944087d1fb58d3b/slide-in-back.gif)

With this effect, we're going to be creating a link that underlines from left to right on hover. When hovered off, the underline will slide back to the left and disappear.

We set the `background-size` width to `0%` initially to hide it. On hover, we change it to `100%` to get it to slide from left to right.

If you want to reverse the direction, change `background-position-x` to `100%` to change the starting position to the right.

```css
a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}
```

[Edit on CodePen](https://codepen.io/nerdcowboy/pen/jOqqxpG)

## 2. Slide middle out

![Example of slide middle out underline effect](https://nerdcowboy.com/a0b1d502429298b617e704172c3070df/slide-middle-out.gif)

When we hover on the link with this effect, the line starts from the middle and extends simultaneously to the right and left edges. On hover-off, the line slides back to the middle and disappears.

The only difference between this one and the previous one is that we change `background-position-x` to `50%` to making the starting point of the underline in the middle.

```css
a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}
```

[Edit on CodePen](https://codepen.io/nerdcowboy/pen/abNNKZe)

## 3. Slide in and out

![Example of slide in and out underline effect](https://nerdcowboy.com/d7bf1ce75390c8f94befe5874879092a/slide-in-out.gif)

Hovering on a link with this effect looks exactly the same as the first effect. However, on hover-off, the underline will slide off to the right instead of snapping back to the left.

There's no hover-off pseudo-class in CSS, unfortunately, but there are some [CSS tricks to mimic it for certain effects](https://css-tricks.com/different-transitions-for-hover-on-hover-off/).

We essentially use the same CSS trick, but here we take advantage of the underline not being initially visible. We set `background-position-x: 100%` with our initial styles so it slides to the right on hover-off and change it to `0%` on hover so that the line comes in from the left.

```css
a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}
```

[Edit on CodePen](https://codepen.io/nerdcowboy/pen/QWNNrzq)

## 4. Slide to middle

![Example of slide to middle underline effect](https://nerdcowboy.com/8d3f4dce3e13cad05ef7e6d4bcb8aed1/slide-to-middle.gif)

With this effect, we have 2 lines that we start on the outside edges and slide them inwards until they meet in the middle. On hover-off, they slide off to the edges and disappear.

Since we have 2 different lines, we need to create 2 linear-gradients. Anytime you want to add another background property, you must add a comma after each item's value. However, if the value is identical for both, CSS will just repeat it. This means we don't have to manually duplicate each background property if it's going to be the same for each linear-gradient.

Since everything else for the lines are the same, we just need to adjust their positions. We set the first line's `background-position-x` to `0%` to start it on the left edge and the 2nd to `100%` to start it on the right edge.

```css
a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%, 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}
```

[Edit on CodePen](https://codepen.io/nerdcowboy/pen/poydBwR)

## Always-visible underline variants

![Example of multi-line slide over the top underline effect](https://nerdcowboy.com/033433ba78735e149729d152f525c965/sliding-variants.gif)

If you do want an underline to always be present, you can still use the first four effects. The only difference is we need to add an additional underline using the same `linear-gradient` effect. Note that for the slide to middle effect, we'll have to do add a 3rd `linear-gradient` since that effect already uses 2 of them.

```css
/*
// Shared Styles
*/
a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

/*
// Slide in & back
*/
.slide-in-back {
  background-position-x: 0%;
}

.slide-in-back:hover,
.slide-in-back:focus,
.slide-in-back:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide in & out
*/
.slide-in-out {
  background-position-x: 100%;
}

.slide-in-out:hover,
.slide-in-out:focus,
.slide-in-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
  background-position-x: 0%;
}

/*
// Slide middle out
*/
.slide-middle-out {
  background-position-x: 50%;
}

.slide-middle-out:hover,
.slide-middle-out:focus,
.slide-middle-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide to middle
*/
.slide-to-middle {
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(
      #d99a5a,
      #d99a5a
    ), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 0% 0.1em, 100% 0.1em;
  background-position-x: 0%, 100%;
}

.slide-to-middle:hover,
.slide-to-middle:focus,
.slide-to-middle:active {
  background-size: 100% 0.1em, 100% 0.1em, 100% 0.1em;
}
```

[Edit on CodePen](https://codepen.io/nerdcowboy/pen/qBZZeby)

## 5. Slide to top

![Example of slide to top underline effect](https://nerdcowboy.com/47db69033603428985762fb7e11ec977/slide-to-top.gif)

For this effect, we have an always-visible underline, but on hover, we'll grow the underline to the top of the anchor.

Since this underline will slide underneath the text, it's important to make sure you use colors that will pass a [contrast checker](https://colourcontrast.cc/) to ensure good accessibility.

Since we want the underline to always be visible, note that we changed the default `background-size`'s width to `100%`. To slide the underline to the top of the link, we change the `background-size`'s height to `100%`.

```css
a {
  color: black;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 100%;
}
```
[Edit on CodePen](https://codepen.io/nerdcowboy/pen/zYqKmBJ)

## Bonus!

![Example of multi-line slide over the top underline effect](https://nerdcowboy.com/0922f9477ebaef8708d65347a7a85cab/slide-over-top.gif)

For making it this far, I have a little treat for you. I saw this effect making the rounds on Twitter and it's actually what inspired me to write this post.

[@jh3yy](https://twitter.com/jh3yy) created [a CodePen](https://codepen.io/jh3y/pen/gOPjBPM) where he animates an underline over an existing underline.

Learn how to create this effect on [Jhey's Egghead tutorial.](https://egghead.io/lessons/css-create-an-animated-underline-effect-using-css-transition-and-css-background-position)

### Got more?

Have a cool _underline_ link effect? I'd love to see it!

Send it to me [@NerdCowboy](https://twitter.com/nerdcowboy) or through my [contact page](https://nerdcowboy.com/contact)!