Ich möchte eine Linienbewegung machen, wenn ich auf ein Element schwebe

Question

Ich möchte eine Hintergrund-Farbverlaufslinie erstellen, die sich von unten nach oben, vor und zurück bewegt, wenn sie in einem Element schwebt.

Was ist der beste Weg, dies zu tun? Ich habe darüber nachgedacht, es unsichtbar zu machen oder nicht, wenn es nicht schwebte und es dann beim Schweben erscheinen lässt, aber das Problem ist, dass es den Höhenraum in einer Navigationsleiste durcheinander bringt, wenn es sich bewegt.

Answer 1

versuchen dieses

html

<a href="#" class="elem">Hover me</a> 

css

.elem{ 
    display: block; 
    position: relative; 
    font-size: 20px; 
    font-weight: bold; 
    padding-left: 15px; 
} 
.elem:before{ 
    content: ""; 
    width: 8px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 0px; 
    background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 
    -webkit-transition: all ease-in-out .5s; /* Safari */ 
    -webkit-transition-timing-function:all ease-in-out .5s; /* Safari */ 
    transition:all ease-in-out .5s; 
} 
.elem:hover:before{ 
    height: 100%; 
}