customization – I am making an attempt to realize hyperlink utilizing picture to the border with animation nevertheless it goes clear

a,a:visited,a:hover,a:lively{
background-image: url(https://www.forbesu.com/wp-content/uploads/2022/10/button.gif);
background-size: cowl;
coloration: clear;
text-decoration:none;
font-size:2.5em;
place:relative;
-moz-background-clip: textual content;
-webkit-background-clip: textual content;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:0.5s coloration ease;
}

a:hover{
background-image: url(https://www.forbesu.com/wp-content/uploads/2022/10/button.gif);
background-size: cowl;
coloration: clear;
text-decoration:none;
font-size:2.5em;
place:relative;
-moz-background-clip: textual content;
-webkit-backface-visibility:hidden;
-webkit-background-clip: textual content;
 backface-visibility:hidden;
transition:0.5s coloration ease;
}

a.earlier than:earlier than,a.after:after{
content material: "";
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
place:absolute;
}

a.earlier than:earlier than{
high:-0.25em;
}

a.after:after{
backside:-0.25em;
}

a.earlier than:earlier than,a.after:after{
border-image: url(https://www.forbesu.com/wp-content/uploads/2022/10/button.gif);
peak:5px;
width:0;
border-width: 2px;
border-style: stable; 
}

a.first:after{
left:0;
}

a.earlier than:hover:earlier than,a.after:hover:after{
width:100%;
}

The hyperlink goes clear from the center when making an attempt so as to add gif as a border What am I lacking from this?

It would not circulation from left to proper as a substitute it shows from backside