Zeile unter dem Link bei Hover
Wie kann ich eine kurze Zeile unter dem Link hinzufügen? Die Linie sollte nur beim Schweben sichtbar sein. Ich habe versucht mit border-bottom, aber so ist die Linie 100% der Linkbreite und ich möchte die Linie kürzer als die Verbindung.
Hier ist ein Beispiel für den Effekt, den ich versuche zu machen.
7 Antworten
Das ist etwas, an das ich gerade gedacht habe, schau es dir an, was du denkst. Also verwenden wir :after und erstellen eine Zeile unter dem Text. Dies funktioniert nur, wenn der Elternteil eine Breite (zum Zentrieren) hat.
HTML:
%Vor%CSS:
%Vor%Aktualisiertes CSS:
%Vor% Nicht sicher, warum ich nicht daran gedacht habe, aber Sie können einfach inline-block verwenden, um es in die Mitte zu bringen, ohne dass der Elternteil eine Breite hat.
Hier ist ein Link mit der gleichen Methode, nur wenn Sie verwirrt wurden.
Ich habe jetzt gesagt, ich sollte sogar auf die offensichtlichste Sache hinweisen, also hier ist ein Update nur für die Leute, die nicht wissen, dass width ein Prozentsatz sein kann.
Die Breite wurde von 5px auf 70% geändert, sodass sie mit der Breite des Textes erweitert wird.
Bearbeiten: Ruddys Lösung hat das gleiche Ergebnis und ist eleganter. Basierend darauf habe ich es kürzlich mit der Hinzufügung von Transition verwendet, wodurch es ein bisschen auffälliger wurde und ich dachte, dass es nützlich wäre, es hier zu teilen:
%Vor%(Ursprüngliche Antwort unten)
Sieh dir das an , das ich gerade erfunden habe und in der Geige spiele:
%Vor%Abhängig von den Prozentangaben können Sie mit a.bordered: hover: vor dem Rand und der linken Position spielen.
Versuchen Sie, eine andere Div für den Rahmen zu erstellen. Und passen Sie die Breite dieses div nach Ihrer Wahl an. Ich hoffe, das wird helfen.