Underline Animation

[KillerKalle]

Hallo, Ich möchte für meine Webseite eine kleine animation im menü machen. Dafür habe ich folgendes snippet:

https://codepen.io/KillerKalle/pen/XWKEQjz

Ich habe nur das problem, dass ich es nicht hinbekomme, dass die animation nur bei der überschrift startet, über die ich hover. Ich weiß, dass es daran liegt, dass sie in einem div liegen, aber wenn ich die klasse im div änder und alles im css anpasse, dann geht die animation gar nicht mehr.

Kann mir jemand helfen?

Beste Grüße Pascal