Hover effects

Underline animation

HoverLink.svelte

<script>
	export let href;
	export let color = 'text-white';
	export let hoverColor = 'after:bg-white';
	export let weight = 'font-medium';
</script>

<a
	{href}
	class={`relative inline-block ${weight} ${color} after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 ${hoverColor} after:transition-transform after:duration-[350ms] after:ease-out after:content-[''] hover:after:origin-bottom-left hover:after:scale-x-100`}
>
	<slot></slot>
</a>

Usage

<script>
import HoverLink from './HoverLink.svelte';
</script>
<HoverLink
href={item.href}
color="text-black"
hoverColor="after:bg-black"
weight="font-medium">{item.text}
</HoverLink>