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: //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