How can I make the border appear from left to right on hover, when I remove the cursor, it also disappears from left to right?

Question

css

Fellow programmers, tell me how to make the border appear from left to right on hover, and when I remove the cursor, it also disappears from left to right? You should get a snake effect.

Answer 1

<@a href="#" class="underline">Move [email protected]>
.underline {
position: relative;
cursor: pointer;
font-size: 24px;
text-decoration: none;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px;
background color: black
content: "";
transition: width 0.5s;
}
.underline:hover:after {
width: 100%;
display:block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
background color: black
content: "";
transition: width 0.5s;
}

Answer 2

border of what?
https://codepen.io/gomoto27/pen/yYoqaa

Answer 3

Appears and disappears from one point Appears and disappears
from opposite points

Answer 4

Like this:
a {
position: relative;
color: #00a650; /*set link color*/
cursor: pointer;
line-height: 1; /*set line height*/
text-decoration: none; /*remove the underline*/
}
a:after {
display: block;
position: absolute;
left: 0; /*change to right:0; to change the direction of the underline */
width: 0;/*set the length of the line before hovering*/
height: 2px; /*set line width*/
background-color: #00a650; /*set line color*/
content: "";
transition: width 0.3s ease-out; /*set animation time*/
}
a:hover:after,
a:focus:after {
width: 100% /*set the value to 100% so that the link is fully underlined*/
}