12

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!

4 Answers 4

28

You can achieve that in pure tailwind with group max-w-{x} and transition-all, use group-hover on the span so when you pass over the link it start the animation

<a href="#" class="group text-sky-600 transition duration-300">
Link
<span class="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"></span>
</a>
0
9

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 class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
        <a href="#" class="font-display max-w-sm text-2xl font-bold leading-tight">
            <span class="link link-underline link-underline-black text-black"> Link Hover Effect </span>
        </a>
    </div>
</div>

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jan 30, 2022 at 4:43
9

If you're not wanting to include a CSS file just for this functionality or you just want to do it in Tailwind - the code snippet I've posted below is based purely on Tailwind CSS.

<a class="group text-pink-500 transition-all duration-300 ease-in-out" href="#">
  <span class="bg-left-bottom bg-gradient-to-r from-pink-500 to-pink-500 bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out">
    This text gets 'underlined' on hover
  </span>
</a>

Cheers and happy coding!

0
1

You can do everything in one single line using the after pseudo-element:

<section class="bg-[#0077b6] h-screen w-screen text-white flex items-center justify-center">
  <a class="text-3xl relative after:bg-white after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:transition-all after:duration-300 cursor-pointer">Text you want to underline in just one line</a>
</section>

Here is a pen with a use case:

https://codepen.io/Marcos-Riverola/pen/poQmRKV?editors=1010

1
  • Concise and effective! Best answer
    – JimZer
    Sep 26 at 13:36

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.