如何将菜单自定义CSS下划线效果从hover改为active状态？

嘿，我来帮你搞定这个自定义下划线的触发状态问题！其实核心就是修改CSS里的伪类选择器，再根据你的需求调整细节，步骤很清晰：

• 第一步：找到原代码中的hover触发规则
  先从你从CodePen复制的代码里，定位到控制下划线动画的hover选择器，通常是类似 a:hover::after、.menu-item:hover .underline 这类的写法——这就是当前鼠标悬停时触发效果的关键。

• 第二步：替换为:active伪类（点击触发）
  把所有的 :hover 伪类直接替换成 :active，这样下划线效果就会在点击链接的瞬间触发。举个实际的代码例子：

  原hover版本代码：

  .menu-link {
    position: relative;
    text-decoration: none;
    color: #333;
  }
  .menu-link:hover::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
    transform: scaleX(1);
    transition: transform 0.3s ease;
    transform-origin: left;
  }
  .menu-link::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
  }
  

  修改为:active触发的版本：

  .menu-link {
    position: relative;
    text-decoration: none;
    color: #333;
  }
  /* 点击时触发下划线动画 */
  .menu-link:active::after {
    transform: scaleX(1);
  }
  .menu-link::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
  }
  

• 第三步：如果需要持久的active状态（当前页面菜单）
  如果你说的active是指「当前页面对应的菜单项一直显示下划线」，那还要额外给该菜单项加一个自定义类（比如.active），然后在CSS里添加对应规则：

  /* 当前页面菜单项持久显示下划线 */
  .menu-link.active::after {
    transform: scaleX(1);
  }
  

  这时候需要确保你的页面路由或者菜单逻辑能给当前页的菜单项自动加上.active类。

• 第四步：检查优先级问题
  如果修改后效果没生效，大概率是CSS优先级的问题。你可以给:active选择器增加权重，比如写成 nav .menu-link:active::after，或者临时用!important（尽量少用，只是排查时用）来测试：

  .menu-link:active::after {
    transform: scaleX(1) !important;
  }
  

这样调整后，你的下划线效果就会按照需求在active状态下触发啦！

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