Tipografía typographylinknavigation

Smart Underline Link

Enlace interactivo con animación de subrayado expansivo que nace desde el centro.

Uso

Copia y pega este código directamente en tu página de Astro:

---
import { SmartUnderlineLink } from 'astro-component-kit';
---

<AnimatedUnderlineLink href="#">Content</AnimatedUnderlineLink>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/SmartUnderlineLink.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>

Información Rápida

Categoría: Tipografía
Nombre de archivo: SmartUnderlineLink.astro
Dependencias: Ninguna — Astro nativo + CSS puro
Etiquetas: typographylinknavigation

Vista Previa en Vivo

Uso

Instalación Manual

Información Rápida