Einer der Vorteile beim Erstellen meiner persönlichen Website von Grund auf neu, anstatt ein vorgefertigtes Thema zu verwenden, besteht darin, dass ich mit den Standard-Browsereinstellungen beginne und nach und nach meine eigenen Farben hinzufüge. Ich versuche, das Aufblähen der Website zu verhindern, aber Personalisierung ist eine wichtige Sache. Wir müssen einen Kompromiss zwischen den spartanischen Seiten von Hacker News und Craigslist einerseits und der Überlastung des alten MySpace andererseits finden.

Irgendwie bin ich auf eine Website mit ausgefallenen animierten Unterstrichen für Links gestoßen, und ich wollte den Effekt realisieren. Für mich ist es jedoch wichtig, reines CSS zu verwenden, da es sich aus Gründen dieser Frivolität nicht lohnt, JavaScript hinzuzufügen, was zu Problemen mit der Leistung oder Benutzerfreundlichkeit der Benutzeroberfläche führen kann (siehe Hijacking der Bildlaufleiste ).

So sieht der Effekt jetzt aus:

Implementierung

Das Zeichnen von Linien unter dem Text ist ein überraschend komplexes Thema . Es hängt alles davon ab, wie weit Sie bereit sind, vom Standard abzuweichen, und welche Details Sie sich Sorgen machen (z. B. das Übergeben entfernter Buchstabenelemente ).

Ich habe zwei Ansätze untersucht . Beide entfernen im Wesentlichen die Standardtextdekoration und fügen mithilfe von Pseudoelementen einen simulierten Rand hinzu. Dieser Rand wird dann durch CSS-Übergänge animiert. Leider haben diese Lösungen einen Nachteil: Sie funktionieren nicht normal, wenn der Link mehr als eine Zeile abdeckt. Die Unterstreichung erscheint nur in der ersten Zeile.


Am Ende fand ich Shaws CodePen ohne diesen Fehler und änderte den Effekt nach meinem Geschmack.


Hier ist der relevante Code. Sie können mit ihm auf repl.it spielen.

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; } 

Lassen Sie uns diese Lösung genauer betrachten.

Schalten Sie zuerst die Standardtextdekoration text-decoration .

Wir müssen ein Hintergrundbild verwenden, da es mehrere Zeilen abdecken kann. Sie können zwar ein echtes Bild aufnehmen, aber es ist nur eine Linie, daher verwenden wir einen linearen Farbverlauf , der ein Bild für uns erzeugt. Normalerweise wird es verwendet, um einen Verlauf zwischen zwei verschiedenen Farben zu erstellen. Die Unterstreichung muss jedoch dieselbe Farbe wie der Link haben. Daher verwenden wir currentColor sowohl für den Anfang als auch für das Ende des Verlaufs. currentColor weist den Browser an, die Farbe des Elements aus der Farbeigenschaft zu verwenden .

Verwenden Sie die Hintergrundposition , um das Bild in der unteren linken Ecke zu platzieren. Ein Wert von 0% entspricht einer horizontalen Position und 100% entspricht einer vertikalen Position.

Deaktivieren Sie die Hintergrundwiederholung , um mehrere Instanzen des Bildes zu vermeiden.

Geben Sie unter Verwendung der Hintergrundgröße die Breite und Höhe von zwei Pixeln auf Null an. Nullbreite bedeutet, dass die Unterstreichung nur beim Schweben angezeigt wird, andernfalls ist das Bild nicht sichtbar.

Stellen Sie den Übergang so ein , dass er zum Hintergrund passt, sodass jede Eigenschaftsänderung 0.3 Sekunden dauert.

Wenn Sie mit der Maus über einen Link fahren, ändern wir die Bildbreite um 100% , wodurch eine vollständige Unterstreichung erstellt wird und der transition eine Animation bietet.

Das ist alles! Ich bin sehr zufrieden mit der Kürze des Codes. Wenn Sie Ihrer Site etwas Ähnliches hinzufügen möchten, können Sie diese Implementierung nutzen oder andere animierte Unterstreichungseffekte sehen .