Quiero implementar un resaltado de elemento de barra de navegación usando un div que se mueve (a través de transiciones) al elemento seleccionado cuando hace clic en él.
Pero además, debería cambiar el color del texto por el que pasa.
Vea este ejemplo (el resaltado rojo se está moviendo actualmente de "Primer" a "Segundo texto", coloreando el texto dentro del resaltado blanco):
Hice un pequeño codepen para mostrar una solución que se me ocurrió, que utiliza position: absolute y overflow: hidden .
Ver aquí: https://codepen.io/JZ_CodePen/pen/JjMzpye
¿Hay una manera más simple/más profesional de implementar esto?
Esa es la mejor manera. Usar position: absolute y overflow: hidden es genial. También está utilizando el evento onclick de JavaScript , lo que lo hace aún mejor. Una cosa que podría hacer es cambiar el text-color del texto al hacer onclick , pero eso haría que todo fuera blanco en lugar de parcialmente como usted desea.