Ideen und Vorschläge für einen Hover Effekt gesucht

[dirksche]

Hallo liebe Community,

derzeit habe ich bei einem Projekt einen besonderen Hover Effekt, der mit den letzten Nerv raubt.
Vielleicht hat jemand von euch eine zündende Idee, wie man das ganze mit CSS vernünftig umsetzen kann.
In der Gif Datei seht ihr den gewünschten Hover Line Effekt. Das ganze sieht auf den ersten Blick recht simpel in der Umsetzung aus, doch das ganze soll auch bei einem Text funktionieren, der über mehrere Spalte läuft und die Underline soll auch direkt unter dem Text kleben... also keinen Abstand haben.

So weit bin ich gekommen:

https://codepen.io/dirk-tietze/pen/oKGeJe

Die Sache mit dem Abstand und der Line-Height will mir nicht gelingen :-(

LG,
Dirk

hover-main.gif
1131461987793411.tkGaPhG6ISh0VFanrAVg_height640.png

[mlweb]

Bei

line-height: 1;

funktioniert Dein Effekt wie gewünscht, wenn ich richtig verstanden habe, wie das bei mehrzeiligen Texten aussehen soll.
Noch habe ich keine bessere zündende Idee. Aber interessanter Effekt. Ich grüble mal.

[mlweb]

Bei hover den padding-bottom erhöhen, vieleicht als Idee - in Deinem Beispiel auf Codepen habe ich es mal auf 0.35rem gesetzt und die Transition auf all.

}
h1 span {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, white 50%, red 50%);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  line-height: 1.3;
  box-decoration-break: clone;
  text-transform: uppercase;
  background-position: 0% 15%;
  padding: 0 0.25rem;
  padding-bottom: 0.125rem;
} 

span:hover {
  background-position: 0 100%;
  padding-bottom: 0.35rem;
}

[dirksche]

Also ich habe es jetzt mit Box Shadow gelöst:

h1 span {
box-shadow: inset 0 -0.1em white, inset 0 -0.25em #83D1FA;
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

span:hover {
box-shadow: inset 0 -0.1em white, inset 0 -1em #83D1FA;
}