Css underline animation left to right

I am trying to replicate this transition from uber.design site:

The thing is that i am stuck at reversing the transition:

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;

Underlined Text

Temani Afif

222k18 gold badges256 silver badges358 bronze badges

asked Feb 10, 2019 at 12:00

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

Underlined Text

In case you want a continuous animation on hover you can try this:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

Underlined Text

You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient

Another kind of animation

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
  background-position: right bottom;
  background-size: 300% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left bottom;
  transition: background-position 0.5s;
}

Underlined Text

let's don't forget the basic one:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: right bottom; /* OR left bottom*/
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.5s;
}

.un:hover {
  background-size: 0% 2px;
}

Underlined Text

You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40

Another related article: Cool Hover Effects That Use Background Properties

answered Feb 10, 2019 at 12:07

Temani AfifTemani Afif

222k18 gold badges256 silver badges358 bronze badges

2

You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.

.un {
  display: inline-block;
  position: relative;
}

.un:after {
  content: '';
  width: 0px;
  height: 2px;
  position: absolute;
  top: 100%;
  left: 0;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}

.un:not(:hover):after {
  right: 0;
  left: auto;
}

Underlined Text

answered Feb 10, 2019 at 12:06

Quentin VeronQuentin Veron

2,8311 gold badge12 silver badges29 bronze badges

3

The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.

span.un {
  position: relative;
}

span.un::after {
  position: absolute;
  content: "";
  background: black;
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0%;
  transition: 300ms ease-in-out;
}

span.un:hover::after {
  width: 100%;
  left: 0;
}

Underline me

answered Sep 12, 2021 at 10:06

How do you underline left to right in CSS?

How do I make an animate left to right in CSS?

How do you underline an animation in CSS?

How do I change the underline width in CSS?