Question 45972 in CSS Question posted in
Some basic documentation can be found here.

Tailwind transition :after – CSS

I’ve got this html

<ul class="flex gap-3"><li class="after:content-[''] after:block after:w-0 after:h-2 after:bg-black hover:after:w-full transition duration-1000 ease-in-out"><a href="/" class="text-lg font-bold text-black uppercase" > home </a></li></ul>

on hover I’d like to apply transition for a nice animation
but there is no animation
Could you help me, please?

https://play.tailwindcss.com/1N3yf48DL1

Tags:

2

Answers


  1. 0

    A couple of changes are needed:

    1. The transition class in TailwindCSS transitions: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter. It doesn’t transition width. So you can change that to either be transition-all or transition-[width].
    2. You need to set the transition property classes on the after element so change them to after:transition-all after:duration-1000 after:ease-in-out

    Working snippet:

    <script src="https://cdn.tailwindcss.com"></script>

<ul class="flex gap-3">
  <li class="after:content-[''] after:block after:w-0 after:h-2 after:bg-black hover:after:w-full after:transition-all after:duration-1000 after:ease-in-out">
    <a href="/" class="text-lg font-bold text-black uppercase" > home </a>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    You could refer to this Tailwind documentation: https://tailwindcss.com/docs/hover-focus-and-other-states

    Anyway, I tried modifying your code into this:

    <ul class="flex gap-3"><li class="after:content-[''] after:block after:w-0 after:h-2 after:bg-black hover:after:w-full hover:after:transition-all transition duration-1000 ease-in-out"><a href="/" class="text-lg font-bold text-black uppercase" > home </a></li></ul>

    So you could further stack pseudo classes in TailwindCSS like hover:after:some-tw-class

    I hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search