ich wahr auf den Link und habe das angekuckt .Das macht eigentlich jeder ,das ist nicht das Problem.
Wie du im ersten Beispiel siehst macht das Script ja den Unterschrich wenn du da drauf klickst.
Eigentlich genau wie du es willst .
decoration underline ist eigentlich dazu da um ein Wort zu unterstreichen wie das hier . Mehr ist underline nicht .
Ich glaube auch nicht das underline in grösse dicke und farbe einstellbar ist .( Kann mich auch irren habe ich noch nie versucht )
Deswegen gibt es da mehrere möglichkeiten einen dicken farblich und animierten Unterstrich dahin zu bauen.
Man kann mit after und before einen Unterstrich machen .
Oder einen extra Container der die grösse hat des Striches.
Vieleicht noch mit <hr> ? ( aber das schließe ich mal aus )
Oder eine einfachere Variante währe noch mit border-bottom einen Strich zu zaubern.
Fragen wir mal so . ist die erste Version so was wie du dir das Vorgestellt hast ? Weil der Strich bleibt ja da wo du gedrückt hast ?
Ich mache das im laufe des Tages mal anders ,ohne Javascript und vieleicht mit border-bottom da sollte man dann einfacher durchblicken.