如何清除:before伪元素动画并使其不可作为可点击链接？

我来帮你搞定这两个问题！你的核心需求是让:before伪元素既不触发链接点击，也不受链接动画影响，我们可以通过两个关键CSS属性和布局调整来解决：

问题分析 #

你的:before伪元素是<a>标签的一部分，默认会继承链接的点击区域，同时<a>标签的text-shadow和动画可能会间接影响它的样式。我们需要把它从链接的交互和样式影响中彻底隔离出来。

解决方案代码修改 #

1. 调整<a>标签的基础样式 #

首先给<a>添加左内边距，为:before伪元素腾出位置，避免和链接文字重叠：

a {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
  vertical-align: bottom;
  padding-left: 1.5em; /* 新增：给伪元素预留左侧空间 */
}

2. 优化:before伪元素样式 #

添加pointer-events: none让伪元素不响应点击，同时设置绝对定位和取消继承的text-shadow，彻底隔离动画影响：

a::before {
  content: '| \a0\a0 \0020';
  font-family: FontAwesome;
  background: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none; /* 关键：禁止伪元素响应鼠标事件，不触发链接跳转 */
  position: absolute;
  left: 0; /* 把伪元素固定在链接左侧 */
  color: red;
  text-shadow: none; /* 取消继承的text-shadow，避免链接文字效果污染伪元素 */
}

3. 简化hover状态的伪元素样式 #

因为大部分属性和默认状态一致，hover时只需要修改颜色即可：

a:hover::before {
  color: red; /* 只保留需要变化的属性，其他继承默认状态 */
}

为什么这样有效？ #

• pointer-events: none：这个属性会让元素完全忽略所有鼠标交互，点击伪元素的区域不会触发链接跳转，完美满足要求(a)。
• 绝对定位+内边距：把伪元素从链接的内容流中抽离，既不会挤压链接文字，也不会被<a>的overflow: hidden裁剪，同时彻底隔离了链接的下划线渐变动画对它的影响，满足要求(b)。
• 取消text-shadow继承：避免<a>标签的文字阴影样式干扰伪元素，确保它的样式完全独立。

测试一下修改后的代码，你会发现:before的竖线既点不动，也不会受到下划线动画的影响，完全符合你的需求！

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