Link Hover Effekt mix-blend-mode

Hallo zusammen,

letztes mal würde mir sooo super hier geholfen. Deswegen suche ich wieder mal eure Hilfe.
Und zwar möchte ich einen Link Hover das so ein Kasten um den Link kommt wenn man mit der Maus drüber geht. (siehe Bild: http://www.bilder-upload.eu/show.php?file=…-1532343192.jpg)
Der Hintergrund soll aber von unten nach oben wandern als Effekt.
Habe auch einen Css Code und es geht soweit auch alles aber ein Problem habe ich doch.
Und zwar bekomme ich einfach nicht diesen Strich unten weg....
Hier mal der Code:

Zitat

a{
/*linear-gradient for hover background*/

background:-webkit-gradient(linear,left top,left bottom,from(#8462cc),color-stop(#8462cc),0);
background:-webkit-linear-gradient(#8462cc, #8462cc) no-repeat scroll center bottom / 100% 2px rgba(0, 0, 0, 0) !important;
background: -moz-linear-gradient(#8462cc, #8462cc) no-repeat scroll center bottom / 100% 2px rgba(0, 0, 0, 0) !important;
background: -o-linear-gradient(#8462cc, #8462cc) no-repeat scroll center bottom / 100% 2px rgba(0, 0, 0, 0) !important;
background: linear-gradient(#8462cc, #8462cc) no-repeat scroll center bottom / 100% 2px rgba(0, 0, 0, 0) !important;
text-decoration: none !important;
border: none !important;
color:#8462cc !important;
padding:3px !important;
/*transition*/
-webkit-transition:background-size 0.2s ease 0s, color 0.1s ease 0.1s !important;
-moz-transition:background-size 0.2s ease 0s, color 0.1s ease 0.1s !important;
-o-transition:background-size 0.2s ease 0s, color 0.1s ease 0.1s !important;
transition:background-size 0.2s ease 0s, color 0.1s ease 0.1s !important;
}

a:hover{
/*background-size*/

-webkit-background-size:100% 100% !important;
-moz-background-size:100% 100% !important;
-o-background-size:100% 100% !important;
background-size:100% 100% !important;
color:#fff !important;

}

Alles anzeigen

Wollte halt gerne so einen Effekt habe: https://codepen.io/TiagoLopes/pen/yopxeW
Oder muss ich es anders angehen?

Ganz liebe grüße die Anfängerin :D

Um die Links in Texten. Bild ist auch dabei und hier auch der link: https://amenitra.de/ueber-mich/
Geht ZUM BEISPIEL um den Link "Mein Kanal".

Edit SirEctor: Vollzitat in direkter Antwort unsinnig und daher gelöscht.

Ist ja auch richtig. Aber ich möchte den Unterstrich nicht haben ;) alles andere geht ja. Nur der Unterstrich soll weg.

Edit SirEctor: Vollzitat in direkter Antwort unsinnig und daher gelöscht.

Hmm also wenn ich das so reinkopiere meckert der customizer bei den beiden "a" 's vorne die werden dann rot :(

[size=24]EDIT: mein Fehler^^ jetzt geht es vielen Dank <3[/SIZE]