CSS Animation Link Underline

In this tutorial we're going to investigate how you can use CSS animation using transition to create link effects on the hover event of the visitor. Were going to look at 4 different effects:

• Middle outwards
• Left to right
• Right to left
• Grow from Bottom

Below are the code explains for the effects.

#Middle outwards

First we need to create a link with the class of middle.

<div class="link-background">
    <a href="" class="middle">Hover Over Me</a>
</div>

We need to add a pseudo class to the add a new element, this element will be used on all the effects, it needs to be at least 2px height and 100% width to cover the size of the link. The background of this new element is going to be the colour you want the underline to be. By default we need to set the visibility property of this element to be hidden by using visibility: hidden; To do the animation we're going to use the CSS property transition: all 0.3s ease-in-out; To perform the animation of expanding the link from the middle to the outside we're going to use the transform property scaleX transform: scaleX(0);, setting this to 0 will scale the element on the x-axis to 0.

a.middle
{
    position: relative;
}

a.middle:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

On the hover event of the button we need to display the :before element by using the visibility: visible;, then we expand the element to full size by changing the scaleX back to 1 transform: scaleX(1);.

a.middle:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

#Left to right

First we need to create a link with the class of left.

<div class="link-background">
    <a href="" class="left">Hover Over Me</a>
</div>

The next effect will slide the underline in from the left of the link to the right. This works in a similar way to the middle above effect by adding a new element by using the pseudo :before. Instead of using scaleX we need to set the width to 0.

a.left
{
    position: relative;
}

a.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

Then on the hover event we show the underline by using the visibility: visible and change the width to 100%.

a.left:hover:before {
  visibility: visible;
  width: 100%;
}

#Right to left

First we need to create a link with the class of right.

<div class="link-background">
    <a href="" class="right">Hover Over Me</a>
</div>

The next effect will slide the underline in from the right of the link to the left. This works in a similar way to the left effect by adding a new element by using the pseudo :before. It will set the width to 0 but will change the position of the element from the left to the right, therefore on the hover event expanding the element to width: 100% to slide the element from the right.

a.right
{
    position: relative;
}

a.right:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.right:hover:before {
  visibility: visible;
  width: 100%;
}

#Grow from Bottom

First we need to create a link with the class of bottom.

<div class="link-background">
    <a href="" class="bottom">Hover Over Me</a>
</div>

Expanding the link from bottom to the top using a similar technique to the sliding from left to right but will use height instead of width. First you set the width back to 100% and hide the height by setting it to 0.

a.bottom
{
    position: relative;
}

a.bottom:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

On the hover event of the link we display the link by setting the visibility property to visible visibility: visible;, then we can expand the underline by setting the height to 3px.

a.bottom:hover:before {
  visibility: visible;
  height: 3px;
}