Underline on hover from left to right

Question

I am exploring Tailwind and I am stuck when I need the underline to appear on hover from left to right.

In plain CSS it would be something like THIS:

    .un {
      display: inline-block;
      padding-bottom:2px;
      background-image: linear-gradient(#000, #000);
      background-position: 0 100%; /*OR bottom left*/
      background-size: 0% 2px;
      background-repeat: no-repeat;
      transition:
        background-size 0.3s,
        background-position 0s 0.3s; /*change after the size immediately*/
    }
    
    .un:hover {
      background-position: 100% 100%; /*OR bottom right*/
      background-size: 100% 2px;
    }

<span class="un">Underlined Text</span>

But I am not sure how to apply this transformation in Tailwind.

score 4 · Answer 1 · answered Aug 02 '22 at 15:48

Try this (Tailwind v3):

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <a href="#" 
       class="relative before:content-[''] before:absolute before:block before:w-full before:h-[2px] 
              before:bottom-0 before:left-0 before:bg-black
              before:hover:scale-x-100 before:scale-x-0 before:origin-top-left
              before:transition before:ease-in-out before:duration-300"
    >
       Underlined Text
</a>
</body>
</html>

Cheers.

score 1 · Answer 2 · answered Dec 30 '21 at 15:42

Something like this?

    .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(#000, #000)
    }

    .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"> Underlined Text </span>
        </a>
    </div>
</div>

I am guessing that `.link-underline`, `.link-underline-black ` etc are CSS. in a styles.css file. Do you know a way to use only in-line Tailwind? — Magofoco, Dec 30 '21 at 16:24
@Magofoco I think it would also be possible with keyframes. You would then have to define your keyframes in your tailwind config. `module.exports = { theme: { extend: { keyframes: { 'fade-in-l-to-r': { '0%': { ...` — Maik Lowrey, Dec 30 '21 at 16:34

Underline on hover from left to right

2 Answers2