Quick and Easy Text Highlight Animation
Tags: tutorial, css
Published: 2019-07-15 12:26:46

---
title: Quick and Easy Text Highlight Animation
published: true
description: Make a cool text highlighting animation using background-position and background-size
tags: tutorial, css
---

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!

![animation of an underline moving up and highlighting all of the text on hover](https://i.imgur.com/yJAj5LS.gif)
 
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.

```css
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:

```css
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:

```css
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](https://codepen.io/wtaylor45/pen/pXGbeY)_