Create an Animated Underline Effect using CSS Transition and CSS Background Position

Jhey Tompkins: [0:00] Let's start by removing the text-decoration from our links. The idea is to recreate that text-decoration with background-image, we can use a linear-gradient that we rotate by 90deg and keep the color constant throughout. Our linear-gradient is covering the entire link background. We can use background-size to make our background look like an underline. There's a reason we see no change.

[0:32] By default, our background will repeat. We need to set background-repeat to no-repeat, but now, even though our underline is the right width, it's in the wrong position. This line needs to be under each word.

[0:45] To fix that, we can use background-position with an X of and a Y of 100%. Now, our link underlines are in the correct place. We can take some of these values and turn them into CSS variables. This will make it easier to maintain our effect.

[1:04] To start, we have the underline-color and the underline-width. To create a little animated block, we can use a second background image. This is also rotate in 90deg, and let's use the background color. This will give an effect of part of our link on the line being cut out.

[1:32] Because our new linear-gradient appears before our underline-gradient, it hides the underline-gradient. This is also because its background-size is the same as the underline. To solve this we can use a second background-size declaration. We can use the underline-width from before for the height, but we are using 50px for the width.

[1:56] We can see now our link underline is missing the first 50px because our new linear-gradient overlaps our underline. Adding a second background-position declaration will move that block. Now we can see our block has moved 50px.

[2:10] We want this to be maintainable. Let's make a variable for our block-width. Let's update our background-declarations to use that new block-width variable. Now we can update the variable to update the size. By default, we want this block to be hidden out of the way. We can use CSS calc to multiply the block-width by -1.

[2:40] That hides a block because now the background position is minus the block size, which would put it out of view.

[2:47] On hover, we want to update the position of that block so that it travels along our link. We update its horizontal position to be 100%, plus, the underline-block-width. Its vertical position remains the same as the position of the underline.

[3:08] As our vertical background position never changes, we can refactor to use background-position-y and background-position-x. Then in our hover, we only need to change background-position-x. Hovering the link of this time will have no effect as there's no CSS transition.

[3:34] To see the animated effect, we need a CSS transition, and we are going to transition background-position-x to .5s. Now when we hover our link, we can see the little block travel along the link. A nice touch might be to have a reduced alpha on our link underlines, and use an increased alpha on hover.

[4:03] This would require updating our background-image to use the hover color for the underline on hover. We can check this by hovering over our link.

[4:12] In review, we can create this animated underline effect by using multiple background images on our links. We use one image as the underline and one image for a block. On hover, we update the background-position and use a CSS transition to give it that smooth animated look. By using CSS variables, we're able to create a maintainable solution.