Change color of text when div is transitioning through it

Question

I want to implement a navbar element highlight using a div that moves (via transitions) to the selected element when you click on it.

But in addition, it should change the color of the text it passes through.

See this example (the red highlight is currently moving from "First" to "Second Text", coloring the text inside the highlight white):

I've made a small codepen to showcase a solution I came up with, which utilizes position: absolute and overflow: hidden.

See here: https://codepen.io/JZ_CodePen/pen/JjMzpye

Is there a simpler / more professional way to implement this?

Answer 1

That is the best way. Using position: absolute and overflow: hidden is great. You are also using the onclick event of JavaScript, which makes it even better. One thing you could do is change the text-color of the text onclick, but then that would make the whole thing white instead of partially like you want.