Need help with separate underline link colors on hover

Design help General
1

Hey, Webflow community!

I am hoping you might be able to help me out! I am trying to apply a certain underline effect in my portfolio site.

In the portfolio section, I have the project title larger in white, and the description smaller in orange. My goal is that when I hover on the project the title is underlined in white and the description is underlined in orange. Just so the colors correspond.

Read Only Link: https://preview.webflow.com/preview/drake-hipples-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=drake-hipples-portfolio&preview=c261aa17891940ae8cf37dbab69e45a9&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @designDrake that’s a great question, you have several ways to create such effect depend what underline style you trying to achieve.

  1. use CSS :hover if you would like to use standard underline
  2. add extra div block under neath give it desired color and after create reveal and hide on mouse hover with some moving animation if needed.
  3. here is link of search result on this forum with keyword “animate link underline”

https://discourse.webflow.com/search?q=animate%20link%20underline

there are also more advanced techniques with use of :before and/or :after or box-shadow: inset
Hope that helps solve your request