Video Tutorial Underline effect

In this tutorial I propose to discover how to create an animated underline effect in CSS.

First approach: pseudo-element

The first approach is to use a pseudo element and animate the property transform to change the value scaleX ().

at {
  position: relative;
}
a :: after {
  happy: '';
  transform-origin: 0 0;
  transform: scaleX (0);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: .4em;
  background: # 78ab4e;
  z-index: -1;
  opacity: 0.8;
  transition: transform .3s;
}
a: hover :: after {
  transform: scaleX (1);
}

Which gives the rendering that one seeks to obtain.

On the other hand, this does not make it possible to manage the case of a multiline text since the pseudo element will be placed with respect to the box composed by the last line:

Approach via a background

Another solution is to use the property background via a linear gradient to create only one border. Then just animate the background-size to create the progressive underline effect.

at {
  text-decoration: none;
  background: linear-gradient (to top, rgba (255, 0, 0, 0.5) 0%, rgba (255, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat left bottom / 0 100%;
  transition: background-size .5s;
}

a: hover {
  background-size: 100% 100%;
}