Custom CSS

This page shows how to give link classes rich visual effects with plain CSS. The styles on this page come from the project’s demo-links.css and can be copied directly.

Configuring Classes

First, assign the class names in the integration:

Configuring Classes

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'underline-animation',
  externalLinkClass: 'border-highlight',
  brokenLinkClass: 'warning-link',
}),

Underline Animation

An underline that expands from left to right on hover:

Underline Animation

Internal Link

About page

External Link

GitHub

Broken Link

Broken link

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'underline-animation',
  externalLinkClass: 'underline-animation',
  brokenLinkClass: 'underline-animation',
  content: null,
}),

.underline-animation {
  position: relative;
  text-decoration: none;
  color: var(--color-primary);
}

.underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.underline-animation:hover::after {
  transform: scaleX(1);
}

Border Highlight

Highlight a dashed underline on hover:

Border Highlight

Internal Link

About page

External Link

GitHub

Broken Link

Broken link

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'border-highlight',
  externalLinkClass: 'border-highlight',
  brokenLinkClass: 'border-highlight',
  content: null,
}),

.border-highlight {
  text-decoration: none;
  border-bottom: 1px dashed var(--color-accent);
  padding: 0 4px;
  transition: background-color 0.2s, border-color 0.2s;
}

.border-highlight:hover {
  background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
  border-bottom: 1px solid var(--color-accent);
}

Glow on Hover

Fill the background and add a glow on hover:

Glow on Hover

Internal Link

About page

External Link

GitHub

Broken Link

Broken link

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'glow-on-hover',
  externalLinkClass: 'glow-on-hover',
  brokenLinkClass: 'glow-on-hover',
  content: null,
}),

.glow-on-hover {
  position: relative;
  text-decoration: none;
  color: var(--color-primary);
  padding: 0 4px;
  transition: color 0.3s;
  z-index: 1;
}

.glow-on-hover::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: transparent;
  border-radius: 4px;
  z-index: -1;
  transition: background 0.3s;
}

.glow-on-hover:hover {
  color: var(--color-primary-content);
}

.glow-on-hover:hover::before {
  background: var(--color-primary);
  box-shadow: 0 0 15px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

Broken Link Warning

Warn about broken links with a strike-through and gradient animation:

Broken Link Warning

Internal Link

About page (style demo)

External Link

GitHub (style demo)

Broken Link

Broken link

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'warning-link',
  externalLinkClass: 'warning-link',
  brokenLinkClass: 'warning-link',
  content: null,
}),

.warning-link {
  text-decoration: none;
  color: var(--color-error);
  background: linear-gradient(
    to right,
    transparent 50%,
    color-mix(in oklab, var(--color-error) 15%, transparent) 50%
  );
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position 0.3s, color 0.3s;
  padding: 0 4px;
  border-radius: 2px;
}

.warning-link:hover {
  background-position: -100% 0;
  text-decoration: line-through;
}

Next Steps

Keep exploring:

Custom Icons - Add icons with wrapperTemplate
Tailwind Styles - Define link styles with Tailwind utilities