CODEWITHSUNDEEP
htmlcss-animationscss-transitionstailwind-css
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5801

How to make link underline effect that transitions from left to the right in Tailwind?

I can make a growing underline effect which will grow to full width and then shrink to its origin:

<a href="#" class="group font-normal">
    Home
    <span class="block max-w-0 group-hover:max-w-full transition-all h-0.5 bg-slate-200"/>
</a>

How do I create a similar effect but with the underline exiting to the right like in version 1 of this demo

Upvotes: 0

Views: 1898

Answers (2)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14263

Something like this I believe you looking for

<a href="#" class="hover:before:scale-x-100 hover:before:origin-left relative before:w-full before:h-1 before:origin-right before:transition-transform before:duration-300 before:scale-x-0 before:bg-red-500 before:absolute before:left-0 before:bottom-0 ">
    Hover me
</a>

The trick here is to change CSS transform-origin direction on hover

before:origin-right hover:before:origin-left

Upvotes: 6

Sarkar
Sarkar

Reputation: 1879

use this as your base and add your styles to it

this one goes to left

<button class="relative py-1 after:absolute after:bottom-0 after:left-0 after:w-full after:scale-x-0 hover:after:scale-x-100 after:transition-all after:origin-left after:h-[2px] after:bg-black">Hover Me</button>

and this one to right

<button class="relative py-1 after:absolute after:bottom-0 after:left-0 after:w-full after:scale-x-0 hover:after:scale-x-100 after:transition-all after:origin-right after:h-[2px] after:bg-black">Hover Me</button>

chnage origin-[direction] to whatever direction you want

Upvotes: 0

Related Questions