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

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

<a href="#" >
    Home
    <span />
</a>

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

CodePudding user response：

use this as your base and add your styles to it

this one goes to left

<button >Hover Me</button>

and this one to right

<button >Hover Me</button>

chnage origin-[direction] to whatever direction you want

CodePudding user response：

Something like this I believe you looking for

<a href="#" >
    Hover me
</a>

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

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