修复子菜单项过渡下划线：限制为文字宽度而非容器宽度

这种下划线过渡从文字宽度变为容器100%宽度的问题，核心原因是下划线伪元素的宽度参考对象发生了变化，结合你修改类名、适配移动端的操作，从以下几个方向针对性排查修复：

1. 检查子菜单项的display属性 #

桌面端正常时，子菜单项必然是inline-block/inline这类由内容撑开宽度的属性。如果适配移动端时误将其改为block，元素会直接占满容器宽度，伪元素的width:100%就会跟着铺满容器。

• 修复：保留子菜单项的内联特性，或者给文字单独套一层内联容器：

  /* 确保子菜单项/文字容器由内容撑开宽度 */
  .mobile-submenu-item {
    display: inline-block;
    position: relative; /* 作为伪元素的定位父级 */
  }
  

2. 修正下划线伪元素的定位逻辑 #

如果必须让子菜单项在移动端显示为block（占满一行），可以给菜单文字单独嵌套一个内联容器，让伪元素基于这个文字容器计算宽度：

<!-- 调整后的子菜单项结构 -->
<li class="mobile-submenu-item">
  <span class="menu-text">目标菜单文字</span>
</li>

.mobile-submenu-item {
  /* 移动端需要的块级布局样式，比如width:100%、padding等 */
}
.menu-text {
  position: relative;
  display: inline-block; /* 宽度由文字撑开 */
}
.menu-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #你的下划线颜色;
  transition: width 0.3s ease;
}
.menu-text:hover::after {
  width: 100%; /* 此时100%对应文字容器的宽度 */
}

3. 排查类名修改后的样式覆盖 #

修改类名后，原有的宽度控制样式可能未绑定到新类名，或者移动端媒体查询中的样式强制覆盖了桌面端规则。

• 用浏览器开发者工具（F12）查看：
  1. 子菜单项的计算宽度是否为容器100%
  2. 伪元素的width属性继承/设置是否正确
• 修复示例（绑定新类名的正确样式）：

  .new-submenu-item {
    position: relative;
    display: inline-block;
  }
  .new-submenu-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width 0.3s ease-in-out;
  }
  .new-submenu-item:hover::after {
    width: 100%;
  }
  

4. 修正移动端媒体查询的冲突 #

如果在@media规则中给子菜单项设置了width:100%或flex:1，会让元素撑满容器，导致伪元素宽度异常。

• 修复：在媒体查询中保留文字容器的内联特性：

  @media (max-width: 768px) {
    .new-submenu-item {
      display: block; /* 移动端保持块级布局 */
      padding: 8px 0;
    }
    .new-submenu-item .menu-text {
      display: inline-block;
      position: relative;
    }
  }
  

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