Link mit einem Gradient-Border versehen

[EuroCent]

Hallo zusammen,

ich sitze vor einem Problem
Und zwar möchte Ich, dass wenn man über einen Link hoverd, dass er nicht den Typischen underline bekommt, sondern einen Border bzw. background der einen Verlauf hat.

mein versuch war:

a.link-item:hover::after {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    border: 0.3rem solid #000;
    margin: 0 !important;
    padding: 0 !important;
}

Damit bekomm Ich zwar das Ergebnis.
Aber der Border ist deutlich länger als der Text und das soll nicht sein.

Hat hier jemadn eine Idee, ich denke mal dass die sehr Simple sein wird
Nur komm Ich aktuell nicht drauf :/

[EDIT]
Hab vergessen zu erwähnen dass die Links in einer liste sind

<ul>
    <li>
        <a href="#" class="link-item">Test</a>
    </li>
</ul>

 

[Sempervivum]

Das Problem ist, dass sich die 100% auf die Breite des a-Elementes beziehen. Der Rand wird jedoch außen herum gelegt, so dass der schwarze Block 100%+2*0.3rem wird, d. h. breiter als der Text. Lösung, indem Du keinen Rand nimmst, sondern einen Kasten mit schwarzem Hintergrund. Oder alternativ nur border-bottom.
Aber warum so kompliziert und nicht einfach dem a-Element selber einen Rand geben? (Siehe link-item-2)

    <ul>
        <li><a class="link-item" href="#">Test</a></li>
        <li><a class="link-item-2" href="#">Test</a></li>
    </ul>
    <style>
        a.link-item,
        a.link-item-2 {
            text-decoration: none;
            position: relative;
        }

        a.link-item:hover::after {
            display: block;
            position: absolute;
            left: 0;
            bottom: -0.3rem;
            content: "";
            width: 100%;
            height: 0.3rem;
            background-color: #000;
            margin: 0 !important;
            padding: 0 !important;
        }

        a.link-item-2:hover {
            border-bottom: 0.3rem solid black;
        }
    </style>

 

[Sempervivum]

PS: Du schreibst "Farbverlauf", in deinem CSS sehe ich jedoch nur einen einfachen schwarzen Rand?

 

[EuroCent]

Okay Danke werd Ich testen und gebe Rückmeldung
Mein Gott, da hätte Ich auch drauf kommen müssen -.-
Aber so ist es nun mal

PS: Du schreibst "Farbverlauf", in deinem CSS sehe ich jedoch nur einen einfachen schwarzen Rand?

Den hatte Ich noch raus gelassen, den wollte Ich später dazu machen, sollte nur ein Hinweis sein