Typography typographylinknavigation
Smart Underline Link
A link with a smooth underline animation that expands from the center.
Preview
Usage
Copy the full block below to use this component with its imports.
astro
---
import { SmartUnderlineLink } from 'astro-component-kit';
---
<AnimatedUnderlineLink href="#">Content</AnimatedUnderlineLink>Manual Installation
If you are not using the npm package, create a new file src/components/lib/SmartUnderlineLink.astro and paste the following code:
astro
---
interface Props { href: string; }
const { href } = Astro.props;
---
<a href={href} class="smart-link"><slot /></a>
<style>
.smart-link { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
.smart-link::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.smart-link:hover::after { width: 100%; left: 0; }
</style>Quick Info
- Category
- Typography
- Filename
SmartUnderlineLink.astro- Dependencies
- None — pure Astro + CSS
- Tags
- typographylinknavigation