Tailwind underline hover animation-CodePudding

I've spent a day figuring out how to make an animation after hovering over the link by using Tailwind-CSS. Here is the animation I want mine link looks like the video. Sample from Youtube

I have tried using :after, but it didn't work out. Here is my link component => https://codepen.io/qqharry21/pen/xxPwqjQ

I Hope can learn how to fix it, and make it works like the video by Tailwind-CSS, thanks!

CodePudding user response：

You can you transition for that:

    .link-underline {
        border-bottom-width: 0;
        background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
        background-size: 0 3px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background-size .5s ease-in-out;
    }

    .link-underline-black {
        background-image: linear-gradient(transparent, transparent), linear-gradient(#F2C, #F2C)
    }

    .link-underline:hover {
        background-size: 100% 3px;
        background-position: 0 100%
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div >
    <div >
        <a href="#" >
            <span > Link Hover Effect </span>
        </a>
    </div>
</div>

CodePudding user response：

I can't comment because of lack of reputation so I'll add this as a answer:

http://ianlunn.github.io/Hover/ has exactly what you want, you can look at it and learn how it is done, it is very simple and straight forward.