Quick and Easy Text Highlight Animation

Highlighting text on your site is a great way to bring attention to key features or important context. Sure, you could just have the text highlighted by default, but what if you could do it in a silky smooth and 😎crazy cool😎 way?

Getting an effect that looks just like this one is super simple, so let me show you!

Let's start off with the initial state where the text is underlined. While it may look like we use a border-bottom or a text-decoration, it's actually a handful of background properties.

span {
  background-image: linear-gradient(#ffd900, #ffd900);
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 2px;
}

The code above says that there is a background-image that is really just the solid color #ffd900. By using background-image, however, we can set background-repeat to no-repeat to have full control over the size and position of the background.

The code that gives us the line itself is background-size: 100% 2px, which says that the background should fill the whole width but only be 2px high. To position that line under the text, we use background-position: 0% 100%, which tells the background to position itself at the start of the text horizontally, but all the way at the end vertically.

Now, let's talk about the highlighted state! I'm going to have the highlighted state trigger on hover, but you could have it trigger any way you want. To get the text highlighted, we just need to make a couple of tweaks to the initial state:

span:hover {
  background-size: 100% 100%;
  background-position: 0% 0%;
}

Not so bad, right! We just use background-size to make the background cover 100% of the width and height of the container and background-position to move the start of the background to the top of the container.

Okay, awesome! We have the text initially underlined, then getting highlighted on hover. It's pretty off-putting, though, how it snaps between states. So let's animate this bad boy!

Doing so is really, really easy. Both background-position and background-size can be animated which is key for what we want to do. That means by just applying a transition to our initial and highlighted states, we can achieve our desired result! Here's what those transitions look like:

span {
  transition: background-size .5s, background-position .3s ease-in .5s;
}
span:hover {
  transition: background-position .5s, background-size .3s ease-in .5s;
}

The hover transition brings the underline up to the top first, and then increases the background-size to 100%. The transition back to the initial state is almost identical, but we shrink the background-size first, and then bring the underline back down. To make one happen after the other we just need to set the transition delay to the same length as the first transition. I do this using the short-hand transition property to set the transition-delay as well as a couple of other properties.

Combining these few lines of code results in that smooth animation I showed you earlier! It doesn't have to stop there though! You can animate these properties however much you want. You can trigger them however you want. You can use these for something other than text highlighting. This is something that really leaves room for creativity, and I urge you to try it out!

Thanks for reading! ✌️

View the source for this animation on CodePen