Generator für animierte Unterstreichung von Links (CSS)
Wähle den Effekt und fahre mit der Maus (oder Tab) über die Links der Vorschau. Der Code nutzt background-size, was auch bei mehrzeiligen Links funktioniert.
So geht’sLinks mit beweglicher Unterstreichung
Dieser Absatz enthält einen kurzen Link und auch einen viel längeren Link, der auf dem Handy in zwei Zeilen umbrechen kann um den Effekt zu testen.
Verfügbar auf: 
Generator für animierte Unterstreichung von Links (CSS): wofür es gut ist
Eine Unterstreichung, die beim Darüberfahren animiert, gibt Links in Menüs und Texten den letzten Schliff. Mit ::after gebaut, funktioniert sie nur bei einzeiligen Links; dieser Generator zeichnet die Linie mit background-image und animiert background-size, was auch funktioniert, wenn der Link umbricht.
Wähle zwischen fünf Effekten (wächst von links, aus der Mitte, gleitet, Textmarker und Wellenlinie), Farbe, Dicke und Dauer. Eine dünne Linie bleibt standardmäßig immer sichtbar, damit sich der Link vom Text unterscheidet, wie es die WCAG 1.4.1 verlangt, und der Effekt erscheint auch beim Tastaturfokus.
So geht’s
- Wähle den Effekt.
- Passe Farbe, Dicke und Dauer an.
- Kopiere das CSS und wende die Klasse auf die Links an.
Wann nutzen
- Navigationsmenüs.
- Links in Artikeln.
- Footer und Linklisten.
Häufige Fragen
Warum background statt ::after?
Mit einem ::after-Pseudoelement funktioniert die Linie nur bei einzeiligen Links. Wenn die Unterstreichung mit background-image gezeichnet und background-size animiert wird, folgt die Linie dem Text, auch wenn der Link in zwei Zeilen umbricht.
Sieht der Link weiter wie ein Link aus?
Mitten in einem Absatz muss sich der Link auch ohne Maus darüber vom Text unterscheiden (WCAG 1.4.1). Deshalb ist die Option, eine dünne Linie immer sichtbar zu lassen, angehakt; der Effekt animiert darüber.
Und auf dem Handy?
Auf dem Handy gibt es kein Darüberfahren; der Effekt erscheint beim Fokus und beim Tippen. Die sichtbare Grundlinie sorgt dafür, dass die Links erkannt werden.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.