Link mit einem Gradient-Border versehen


EuroCent

Erfahrenes Mitglied
#1
Hallo zusammen,

ich sitze vor einem Problem :D
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:
CSS:
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 :D
HTML:
<ul>
    <li>
        <a href="#" class="link-item">Test</a>
    </li>
</ul>
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#2
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)
Code:
    <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>
 

Neue Beiträge