超链接样式设计专家

CSS代码实现

/* ========== Link tokens (可按需在项目里覆盖) ========== */
:root {
  /* 基础色（浅色模式） */
  --link: #2D6AE3;              /* 默认 */
  --link-hover: #4B83EB;         /* 悬停 fallback（提亮约10%） */
  --link-active: #2155B5;        /* 激活 */
  --link-visited: #6A5ACD;       /* 已访问（在浅色背景下与正文#0A0A0A保持良好可读） */

  /* 深色模式色（确保在 #9CC1FF–#B3CCFF 区间内） */
  --link-dark: #AEC3FF;          /* 默认（AA 对比） */
  --link-dark-hover: #B7CBFF;    /* 悬停 fallback（提亮约10%） */
  --link-dark-visited: #9FB6FF;  /* 已访问（AA 对比） */

  /* 交互与动效 */
  --link-focus-ring: #99B6FF;    /* focus-visible 外描边 */
  --link-underline-color: currentColor;
  --transition-fast: 180ms;
  --inline-pad: 0.05em;          /* 微增行内点击/可视间距，总计≈0.1em */

  /* 字体（系统栈 & 字重） */
  --link-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                      Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --link-font-weight: 500;
}

/* 在支持 color-mix 的环境里，用更精确的“提亮10%” */
@supports (color: color-mix(in srgb, #000 0%)) {
  :root {
    --link-hover: color-mix(in srgb, var(--link), white 10%);
    --link-dark-hover: color-mix(in srgb, var(--link-dark), white 10%);
  }
}

/* ========== 基础样式 ========== */
a[href] {
  color: var(--link);
  font-family: var(--link-font-family);
  font-weight: var(--link-font-weight);
  line-height: inherit;                  /* 不改变排版的行高，由父级控制 */
  text-decoration-line: none;            /* 默认无下划线 */
  text-decoration-thickness: 2px;        /* 规范要求：厚度2px */
  text-underline-offset: 3px;            /* 下划线偏移3px，增强可读 */
  text-decoration-color: var(--link-underline-color);
  text-decoration-skip-ink: auto;        /* 下划线与字形更好配合 */
  padding-inline: var(--inline-pad);     /* 微增行内间距 ≈0.1em 总计 */

  transition:
    color var(--transition-fast) ease-out,
    text-decoration-color var(--transition-fast) ease-out,
    outline-color var(--transition-fast) ease-out;
  outline: none;                         /* 仅用 :focus-visible 显示描边 */
}

/* ========== 交互状态 ========== */
a[href]:hover {
  color: var(--link-hover);              /* 提亮10% */
  text-decoration-line: underline;       /* 悬停显示下划线 */
  text-decoration-color: currentColor;   /* 下划线颜色随链接色过渡 */
}

a[href]:active {
  color: var(--link-active);             /* 激活色 */
  text-decoration-color: currentColor;
  transition: none;                      /* 激活时关闭过渡（即时反馈） */
}

a[href]:visited {
  color: var(--link-visited);            /* 浅色模式的已访问色 */
}

a[href]:focus-visible {
  outline: 2px solid var(--link-focus-ring);
  outline-offset: 2px;
  text-decoration-line: underline;       /* 焦点可见时增加下划线，提升可发现性 */
  text-decoration-color: currentColor;
}

/* ========== 深色模式（AA 对比） ========== */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }

  a[href] {
    color: var(--link-dark);
  }
  a[href]:hover {
    color: var(--link-dark-hover);
  }
  a[href]:visited {
    color: var(--link-dark-visited);
  }
  /* :active 仍使用 --link-active（对深色背景对比充足） */
}

/* ========== 减少动画（无障碍） ========== */
@media (prefers-reduced-motion: reduce) {
  a[href] {
    transition: none;                    /* 仅切换颜色，不做过渡动画 */
  }
}

样式说明

• 颜色体系
  • 浅色模式默认链接色为品牌主色 #2D6AE3；悬停提亮10%（使用 color-mix 精准，提供 #4B83EB 作为回退）；激活色 #2155B5；已访问色 #6A5ACD（在浅色背景下对比度约 5.4:1，满足 AA）。
  • 深色模式默认链接色设为 #AEC3FF，已访问为 #9FB6FF，均位于 #9CC1FF–#B3CCFF 区间，针对常见深色背景（如 #0A0A0A–#1A1A1A）对比度远高于 4.5:1。悬停色在此基础上提亮约10%，可读性更强。
• 下划线规范
  • 默认无下划线；悬停与焦点可见状态显示下划线，厚度 2px、偏移 3px，text-decoration-color 使用 currentColor，与链接色同步 180ms 过渡。
  • text-decoration-skip-ink: auto 让下划线绕过字形笔画，视觉更干净。
• 字体与排版
  • 使用系统字体栈，字重 500，行高继承父级设置，不主动改变页面排版结构。
  • 微增行内点击/视觉间距：padding-inline: 0.05em（总计 ≈0.1em），提升触达与密集文本阅读的可点中性，且对排版影响极小。
• 交互与动效
  • 颜色与下划线颜色均设置 180ms ease-out 过渡，响应及时且克制。
  • :active 状态关闭过渡，提供即时按压反馈。
  • :focus-visible 使用 2px 外描边 #99B6FF 且 outline-offset 2px，键盘可达性良好，同时保留下划线以增强可发现性。
• 兼容性与回退
  • color-mix 提供更精准的 10% 提亮效果；在不支持的浏览器中使用预估的接近色（#4B83EB、#B7CBFF）作为回退。
  • 其余属性均为现代标准属性，已在主流现代浏览器中广泛支持；无需使用已废弃或非标准前缀。

使用建议

• 基础接入
  • 直接引入本段样式即可全站生效（选择器为 a[href]，避免影响无链接的锚点）。
  • 建议在浅色主题正文颜色使用 #0A0A0A，并设置页面基础排版（如 body { font-size: 16px; line-height: 1.6; }）。
  • 若需移动端自适应字号，可在全局使用：html { font-size: clamp(14px, 1.4vw, 16px); }，链接将继承它而不破坏排版。
• 可定制方向
  • 品牌或主题切换：覆盖 :root 中的 CSS 变量即可（例如调整 --link、--link-active、--link-dark 等）。
  • 需要在非悬停场景（如触屏）增强可发现性时，可将 a[href] 的 text-decoration-line 由 none 改为 underline 或仅在特定容器内覆盖。
  • 提升可触达面积而不影响视觉，可在触屏断点增大 --inline-pad 值，如在 @media (pointer: coarse) 中设为 0.1em。
• 无障碍与可用性
  • 已启用 prefers-reduced-motion 支持，减少动画环境下仅进行即时颜色切换。
  • 焦点样式仅在 :focus-visible 时出现，避免鼠标点按后出现轮廓的“闪烁”干扰，兼顾键盘导航可达性。
• 命名与维护
  • 变量名清晰、集中定义，便于主题扩展与多人协作。
  • 选择器简洁，不与组件库产生冲突；如需局部应用，可将整段规则限定到特定容器内（例如 .prose a[href] { ... }）。