如何仅旋转CSS ::after伪元素内容而不旋转整个父元素

解决方案 #

CSS 中的::after伪元素不属于实际DOM节点，无法直接通过JavaScript操作它的独立样式，你可以通过以下两种方式实现仅旋转玩家图标、不影响整个Tile div的需求：

方案1：预定义状态类（推荐，易维护）

提前在CSS中定义不同移动方向对应的旋转状态类：

/* 向上移动的旋转状态，仅作用于player的伪元素 */
.player.up::after {
  transform: rotate(-90deg);
  /* 如需平滑过渡可加以下属性 */
  transition: transform 0.2s ease;
}
/* 后续可扩展其他方向的类，比如down、left、right */

JavaScript端不需要修改元素的transform，只需要切换类即可：

// 先清理其他方向的状态类
grid[i][j].DOMElement.classList.remove('down', 'left', 'right');
// 添加上移状态类
grid[i][j].DOMElement.classList.add('up');

方案2：CSS变量动态传值（更灵活）

修改原有player的CSS，通过CSS变量接收旋转角度：

.player {
  position: relative;
  &::after {
    z-index: 99;
    content: "";
    width: 18px;
    height: 18px;
    position: relative;
    background: url(./../assets/player.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* 新增以下两行，默认旋转角度为0 */
    transform: rotate(var(--player-rotate, 0deg));
    transition: transform 0.2s ease; /* 可选平滑过渡 */
  }
}

JavaScript端直接给父元素设置CSS变量即可，不会影响父元素本身的状态：

grid[i][j].DOMElement.style.setProperty('--player-rotate', '-90deg');
// 要恢复默认状态时执行以下代码即可
// grid[i][j].DOMElement.style.setProperty('--player-rotate', '0deg');

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