Cool nav link hover animations with tailwindcss

There is this new trend called "neo-brutalism" that's used in quite a lot of applications on the web these day (e.g. on Figma or Gumroad.

I personally really like that style and it seems really fresh and clean to me. Often the hover animations on navigation links are using a kind of sliding borders from left to right.

Implementation in CSS

After a little research I have found that this can easily be implemented with CSS and the pseudo-element "after".

a:after {
  display:block;
  content: '';
  border-bottom: solid 3px black;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
a:hover:after { transform: scaleX(1); }

This will create the effect of a bottom border growing from the center when hovering the link as can be seen in this codepen.

Pretty nice already, right?  

Implementation in Tailwindcss

As I am a hard-core tailwind user (and probably always will be), I have transformed this into tailwind utility classes, such that when applied on a link element it looks as follows:

Expand from center

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center">
Link
</a>

Expand from left

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-left">
Link
</a>

Expand from right

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-right">
Link
</a>

This is an easy and quick solution to create some modern link element styling but there are many other ways this can be used (for example with background-gradients).

Here are my sources for this post:
https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border
https://css-tricks.com/css-link-hover-effects/

❤️ Thanks for reading ❤️

Comments

[zlaam]

function greet(message:string){
   return message
}
console.log(greet("Thank you so much"))

[Noé Mora]

Nice one! 🔥

[Arun Khadka]

It helped a lot. Thanks so much.