如何覆盖Shopify主题所有链接效果移除悬停动画下划线

安全阿岳

2026-9-3

失效原因

你之前写的CSS没效果，是因为这个悬停下划线根本不是<a>标签本身的样式：主题给所有a标签加了::after伪元素生成下划线，动画属性全绑在这个伪元素上，悬停时靠修改伪元素的width和left值做出从中间向两边展开的动画，你给a标签本身加transition: none完全碰不到伪元素的样式，自然没用。

可行方案

把自定义代码加到css.liquid文件末尾即可，按你的需求选对应的代码：

仅给你加了a1类的链接移除动画（不影响其他原有链接样式，优先选这个）

a.a1::after {
  content: none !important;
  transition: none !important;
  width: 0 !important;
}
a.a1:hover::after {
  left: 50% !important;
  width: 0 !important;
}

这里加!important是为了压过主题原有样式的优先级，Shopify主题经常有多层CSS嵌套，不加的话很可能被原有规则覆盖不生效。

如果要全站所有链接都去掉这个悬停下划线效果，用这段代码：

a::after {
  content: none !important;
  transition: none !important;
  width: 0 !important;
}
a:hover::after {
  left: 50% !important;
  width: 0 !important;
}

操作提示