如何用CSS实现链接下划线与文本等长的hover效果？

要实现下划线长度和文本宽度匹配且保留hover动画，核心是让链接元素的宽度收缩到文本尺寸，再基于这个宽度做下划线动画。以下是具体实现方案：

关键思路 #

• 让链接元素（比如<a>）的宽度适配文本内容，而非撑满父容器
• 使用伪元素创建下划线，通过过渡动画控制其宽度从0扩展到链接元素的宽度（即文本宽度）

React组件示例 #

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <a href="/" className="nav-link">Home</a>
      <a href="/portfolio" className="nav-link">Portfolio</a>
      <a href="/contact" className="nav-link">Contact</a>
    </nav>
  );
};

export default Navbar;

CSS样式实现 #

/* 导航栏基础布局 */
.navbar {
  display: flex;
  gap: 2rem;
  padding: 1rem 2rem;
  background-color: #f8fafc;
}

/* 链接核心样式 */
.nav-link {
  /* 关键：让链接宽度随文本收缩 */
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #1e293b;
  font-size: 1.1rem;
  padding-bottom: 0.3rem; /* 给下划线预留空间 */
}

/* 下划线伪元素 */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #3b82f6;
  /* 平滑过渡动画 */
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover时展开下划线 */
.nav-link:hover::after {
  width: 100%;
}

说明 #

• display: inline-block 是核心：它让.nav-link的宽度由内部文本决定，而非继承父容器的100%宽度
• 伪元素::after绝对定位在链接底部，初始宽度为0，hover时过渡到100%（此时的100%等于链接元素的宽度，也就是文本的实际宽度）
• 可以通过调整transition的参数（比如时长、缓动函数）来定制动画的快慢和节奏

内容的提问来源于stack exchange，提问作者KKot