Css pseudo-class 'after' not working with tailwindcss

Question

I'm trying to recreate this with tailwindcss however when I implement this the hover effect is not working.

export default Home(){
    return(
        <a
            href={item.href}
            className="px-3 py-2 text-sm font-medium after:origin-center after:scale-x-0 after:border-b-2 after:transition-all after:duration-500 after:ease-in-out after:content-none hover:after:scale-x-100 hover:after:border-white"
            aria-current="current item"
        >
           Item name
        </a>
    )
}

Are you using tailwind JIT? Because if not, you might not have the `after` `psuedoclass` enabled — Zachiah, Nov 19 '22 at 00:41

John Li · Accepted Answer · 2022-11-19T00:50:53.377

I created a working example using Tailwind following your desired result.

You can check the live demo here: stackblitz

The environment is installed following Tailwind official guide.

Hope this will help!

Example:

<div className="flex flex-col gap-6 justify-center items-center">
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-center after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect center
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-left after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect left
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-right after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect right
  </a>
</div>

Problem was me using 'after:content-none' – Furkan Öztürk Nov 19 '22 at 08:43 — Furkan Öztürk, Nov 19 '22 at 08:43

Css pseudo-class 'after' not working with tailwindcss

1 Answers1