CSS自定义样式

本页面展示如何用纯 CSS 为链接类名定义丰富的视觉效果。页面上的样式均来自本项目的 demo-links.css，可以直接复制使用。

基础类名配置

先在集成中指定类名：

基础类名配置

内部链接

关于页面

外部链接

GitHub↗

断开链接

断开链接

astro.config.mjs

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

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

下划线动画

悬停时从左向右展开的下划线：

下划线动画

内部链接

关于页面

外部链接

GitHub

断开链接

断开链接

astro.config.mjs

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

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

global.css

.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);
}

边框高亮

悬停时高亮虚线下边框：

边框高亮

内部链接

关于页面

外部链接

GitHub

断开链接

断开链接

astro.config.mjs

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

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

global.css

.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);
}

悬停发光

悬停时填充背景并产生光晕：

悬停发光

内部链接

关于页面

外部链接

GitHub

断开链接

断开链接

astro.config.mjs

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

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

global.css

.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);
}

断开链接警告

断开链接使用删除线与渐变动画提示用户：

断开链接警告

内部链接

关于页面（样式演示）

外部链接

GitHub（样式演示）

断开链接

断开链接

astro.config.mjs

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

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

global.css

.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;
}

下一步

继续浏览：

• 自定义图标 - 用 wrapperTemplate 添加图标
• Tailwind 样式 - 用 Tailwind 工具类定义链接样式