Change color of text when div is transitioning through it

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?