Is there any way to make the text underline of link animate slowly in and out? Transition set to "all" does not seem to work

Design help General
1

Can’t get link text underline to animate in and out slowly using transition ALL.

Take a basic text link. Set the text underline to none. Then set the hover effect to have the default text underline back. Set transition to ALL with 400ms delay…but the underline appears immediately.

I also tried setting link to bottom border instead of text underline…same thing happens. I then tried using gradient background to emulate an underline. Same thing.

Any techniques out there for getting that darn underline to animate in/out slowly?

https://preview.webflow.com/preview/pcori?preview=dee3488bf76de497e200a9664693c9d2

2

You can’t apply css transitions to the underline (text-decoration property).

To achieve the effect you’re going for:

  1. Set element to display inline-block
  2. Remove underline
  3. Set border bottom to desired width, solid, transparent
  4. Change your transition property to affect border
  5. On :hover, give the bottom border a color
2 Likes
3

Thanks that seems to work! But not so great if the link wraps into multiple lines :frowning:

4

@DFerroF1
You can add the word-break css property to the links inside the custom code area.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.