Why does the underline of text behave like this:

Question

So, normally, when the text has letters like q and p, the underline hides behind the letter, I have made a game using only HTML5, and for some reason, whenever I click on an SVG element to make an animation play the underline gets infront the letter, when I click again it gets behind the letter again, there is just no reason for it to behave like this, why does it behave like this? And how do I fix that?

https://code.sololearn.com/WgSpmu7j0qGZ/?ref=app

Answer 1

You will notice that when you click on the key and it appears on the inventory the underline gets infront the line of the p letter, when you open the door and the key leaves from inventory the line gets hidden behind p line again, the code has nothing to do with the underline, the animations can only effect SVG elements, I just don't understand why it behaves like this.