如何移除锚点元素::after伪元素的hover效果？含无效代码求助

我来帮你搞定这两个问题，咱们一步步来：

1. 如何移除锚点元素::after伪元素的hover效果？ #

有两种常用方法，你可以根据需求选择：

• 方法一：直接重置伪元素的hover状态样式
  如果你的CSS里已经定义了a:hover::after的样式，直接覆盖这个状态，把它重置为初始状态就行。比如：

/* 假设原来的伪元素hover样式是这样 */
a:hover::after {
  color: red;
  text-decoration: underline;
}

/* 现在重置它 */
a:hover::after {
  color: inherit; /* 继承父元素的颜色，也就是锚点默认颜色 */
  text-decoration: none; /* 去掉下划线 */
  /* 其他样式根据你的实际需求重置，比如background、transform等 */
}

要是不需要伪元素在hover时显示，直接设置content: none也行。

• 方法二：阻止伪元素响应鼠标事件
  给伪元素加上pointer-events: none，这样它完全不会触发任何鼠标事件，自然也就没有hover效果了。还可以搭配cursor: default改变鼠标样式：

a::after {
  pointer-events: none;
  cursor: default; /* 可选，鼠标移上去不再显示手型 */
}

2. 如何在不重置锚点本身hover状态的前提下，移除::after伪元素的hover效果？ #

这个核心是只针对伪元素的hover状态操作，不碰锚点本身的hover样式，推荐两种靠谱的方式：

• 方式一：精准重置伪元素的hover样式
  假设你的锚点本身hover有样式（比如文字变蓝），但不想让伪元素跟着变，就单独给a:hover::after设置和非hover时一样的样式：

/* 锚点本身的hover效果保留 */
a:hover {
  color: blue;
}

/* 伪元素默认样式 */
a::after {
  content: " →";
  color: #666;
}

/* 重置伪元素的hover样式，和默认状态一致 */
a:hover::after {
  color: #666; /* 和非hover时的颜色一样，就看不出变化了 */
}

• 方式二：用pointer-events隔离伪元素
  还是用pointer-events: none，这个属性只会作用在伪元素上，完全不会影响锚点本身的hover、点击等事件。之前你的代码无效，大概率是这两个原因：
  1. 伪元素没有设置content，导致它根本没渲染出来，hover效果自然不存在；
  2. 原来的伪元素hover样式优先级比你的代码高（比如用了ID选择器或者类选择器），这时候你需要提高选择器的优先级，比如加上锚点的类名：

.your-link-class::after {
  pointer-events: none;
  cursor: default;
}

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