滑动下划线

悬停链接时下划线从左侧画入，移开时从右侧离开，像一条线从文字下方穿过。

CSS
文字
悬停
收录于 2026-10-29

AI 提示词

用纯 CSS 制作带滑动下划线的导航链接。每个链接设为 position: relative，用 ::after 画一条线（高 2px，bottom -4px，满宽，主色），初始为 transform: scaleX(0)，transform-origin: right。在 :hover 和 :focus-visible 时，改为 transform-origin: left 和 scaleX(1)。transform 过渡 300ms，缓动为 cubic-bezier(0.16, 1, 0.3, 1)。由于原点会切换，线条从左侧进入、从右侧离开。在 prefers-reduced-motion 下直接显示线条，不做滑动。链接文字为“作品”“关于”“联系”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function UnderlineSlide({ labels }: { labels: Record<string, string> }) {
  return (
    <nav className={s.nav}>
      {[labels.a, labels.b, labels.c].map((t) => (
        <a key={t} href="#" className={s.link} onClick={(e) => e.preventDefault()}>
          {t}
        </a>
      ))}
    </nav>
  )
}

demo.module.css

.nav {
  display: flex;
  gap: 28px;
}

.link {
  position: relative;
  color: var(--stage-ink);
  font: 500 var(--text-xl) / 1.2 var(--font-display);
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--stage-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .link::after { transition: none; }
}