Next.js中同SCSS类的::after元素高度不一致问题排查

API 探路者

2026-6-16

Next.js中单个按钮::after伪元素高度异常问题排查

我开发了一个Next.js应用，其中有六个使用相同SCSS类、结构完全一致的按钮元素，但其中一个按钮的::after伪元素高度异常，其余五个表现正常，暂时无法定位原因。

相关代码

SCSS类代码

.underline-button {
  color: $color;
  cursor: pointer;
  user-select: none;

  &:after {
    content: "";
    display: block;
    width: 50%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: $color;
    transition: width 0.3s;
  }

  &:hover:after {
    width: 100%;
  }

  &:active:after {
    width: 0;
  }
}

JSX代码

export default function Home() {
  return (
    <div>
      <div className="underline-button">Button</div>
      <div className="underline-button">Button</div>
      <div className="underline-button">Button</div>
      <div className="underline-button">Button</div>
      <div className="underline-button">Button</div>
      <div className="underline-button">Button</div>
    </div>
  );
}

排查方向与解决建议

检查全局样式冲突：查看是否有其他全局CSS选择器（比如nth-child、特定父容器下的选择器）意外覆盖了该按钮::after的高度属性，可通过浏览器DevTools的样式面板查看规则来源。
验证样式优先级：Next.js的样式方案可能存在优先级冲突，可临时给::after的height属性添加!important验证是否被覆盖（仅用于排查，不建议长期使用）。
隔离布局影响：给.underline-button添加box-sizing: border-box明确盒模型，或添加display: inline-block/overflow: hidden，避免父元素布局属性（如line-height、padding）影响伪元素。
排除浏览器缓存：强制刷新浏览器缓存（Ctrl+Shift+R），或在无痕模式下测试，排除缓存导致的渲染异常。
检查DOM结构：通过DevTools查看实际渲染的DOM，确认异常按钮是否存在隐形字符、额外嵌套或动态结构变化。