为何通过::before伪元素添加的箭头无法实现X轴旋转？

你的代码存在两个核心问题导致动画不生效：

1. 伪元素默认是行内元素，无法应用rotateX这类3D变换；
2. 动画被绑定到了所有状态的伪元素上，而非仅链接的active状态。

以下是修正后的代码：

CSS 代码 #

.nav {
  list-style: none;
}

.side:link,
.side:visited {
  color: #0018d1;
  font-size: 24px;
  text-decoration: none;
}

.side::before {
  content: "\21d2";
  display: inline-block; /* 关键：改为inline-block以支持3D变换 */
  margin-right: 8px;
}

/* 仅在链接激活时触发旋转动画 */
.side:active::before {
  animation: rotateX 0.3s forwards; /* forwards让动画结束后保持最终状态 */
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

可选简化方案（用过渡代替动画） #

如果不需要逐帧动画，仅需点击时平滑旋转，用transition会更简洁：

.side::before {
  content: "\21d2";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.side:active::before {
  transform: rotateX(-90deg); /* 直接设置最终变换状态 */
}

说明 #

• 给伪元素设置display: inline-block是让3D变换生效的前提，行内元素不支持这类变换；
• :active伪类仅在链接被点击（按住鼠标）时触发，如果你需要的是当前页面对应的链接保持旋转状态，应该使用:target伪类（配合锚点）或添加JS动态切换类名。

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