Animierte Link-Unterstreichungen, die zu Block Hintergründen werden

Es ist ein cool kleiner Effekt. Der Standard-Link-Stil hat eine Unterstreichung (was eine gute Idee ist) und dann wird beim :hover die Unterstreichung im Wesentlichen dicker und verwandelt sich fast in das, was sie gewesen wäre, wenn man eine background-color auf dem Link verwendet hätte.

Hier ist ein Beispiel für den Effekt auf der Superfriendly-Website

Eine Reise

• Die Superfriendly-Website macht das mit box-shadow. Indem box-shadow: inset 0 -0.07em 0 #0078d6; in box-shadow: inset 0 -0.85em 0 #a2d5fe; mit einer Transition umgewandelt wird. Andres Cuervo hat diese Idee auf einen Pen portiert. (Ich habe ihn geforkt, um die Idee des "Start-Offsets" zu beheben, die mir am Original fehlerhaft erschien).
• Man könnte versucht sein, die Linie mit einem Pseudo-Element zu zeichnen, das beispielsweise absolut innerhalb des relativ positionierten Links positioniert ist. Dann animiert man seine Höhe oder scaleY oder etwas Ähnliches. Hier ist eine solche Idee. Ihr Feind hier werden Links sein, die auf neue Zeilen umbrechen, was box-shadow anscheinend eleganter handhabt.
• Eine andere Idee wäre die Verwendung von linear-gradient mit harten Farbstopps, um quasi das Zeichnen einer Linie zu "fälschen", die so positioniert ist, dass sie wie eine Unterstreichung aussieht. Dann kann der Verlauf animiert werden, um das Element beim Überfahren abzudecken, wahrscheinlich durch Verschieben seiner background-position. Hier ist eine solche Idee und ein weiteres Beispiel, das wir vor einiger Zeit geschrieben haben. Dies handhabt Zeilenumbrüche besser als die vorherige Methode.
• Die Standard-text-decoration: underline; hat heutzutage einen deutlichen Vorteil: text-decoration-skip-ink! Es ist zum Standardverhalten für Links geworden, dass die Unterstreichungen geschickt um die Unterlängen im Text herumspringen, was für viel schönere Unterstreichungen sorgt, als es jede dieser Techniken (auch: Ränder) leisten kann. Es gibt relativ neue Eigenschaften, derer Sie sich vielleicht nicht bewusst sind, die Ihnen mehr Kontrolle über die Unterstreichung geben, als wir traditionell hatten, wie z. B. text-decoration-color. Aber es gibt noch mehr, wie Dicke und Abstand, die diesen Effekt ermöglichen! Miriam Suzanne hat eine Demo genau davon, die derzeit nur in Firefox Nightly funktioniert, aber bald die Runde machen sollte.

Zusammenfassung: Wenn Sie diesen Effekt jetzt in möglichst vielen Browsern umsetzen müssen, ist die box-shadow-Technik wahrscheinlich am besten. Wenn es sich nur um eine Verbesserung handelt, die noch etwas warten kann, ist die Verwendung von text-decoration-thickness / text-decoration-offset / text-decoration-color mit einer Transition eine bessere Option für Ästhetik, Kontrolle und die Möglichkeit, den Code auf den ersten Blick zu verstehen.