修改CSS动画箭头方向：从右向左指向的实现问题

我懂你现在的困扰——原本正常运行的左向箭头动画，想改成从右向左指向，但调整before/after元素后完全没变化对吧？问题出在原代码的定位逻辑、变换原点和动画触发逻辑都是针对右向箭头设计的，咱们得从这几个核心点调整，一步步来：

关键问题分析 #

原代码里的箭头伪元素（shaft:before/shaft:after）默认是靠右定位，变换原点也是右上角/右下角，旋转角度是为右向箭头设计的。要改成左向，得把这些核心属性全部反转，同时调整hover时的动画位移方向。

修改后的完整代码 #

CSS部分 #

body { background: black; }
.the-arrow { width: 64px; transition: all 0.2s; }
/* 修改左箭头的初始状态，现在作为默认显示的右指向箭头 */
.the-arrow.-left { position: absolute; top: 60%; right: 0; }
.the-arrow.-left .shaft { width: 0; background-color: #999; }
.the-arrow.-left .shaft:before, .the-arrow.-left .shaft:after { width: 0; background-color: #999; }
.the-arrow.-left .shaft:before { transform: rotate(0); }
.the-arrow.-left .shaft:after { transform: rotate(0); }
/* 修改右箭头的布局和初始状态，现在作为待展开的左指向箭头 */
.the-arrow.-right { top: 3px; }
.the-arrow.-right .shaft { width: 64px; transition-delay: 0.2s; }
.the-arrow.-right .shaft:before, .the-arrow.-right>.shaft:after { 
  width: 8px; 
  transition-delay: 0.3s; 
  transition: all 0.5s; 
}
/* 调整旋转角度，适配左指向 */
.the-arrow.-right .shaft:before { transform: rotate(-40deg); }
.the-arrow.-right .shaft:after { transform: rotate(40deg); }
/* 核心修改：伪元素从靠右改成靠左，变换原点改为左上角/左下角 */
.the-arrow .shaft { 
  background-color: #fff; 
  display: block; 
  height: 1px; 
  position: relative; 
  transition: all 0.2s; 
  transition-delay: 0; 
  will-change: transform; 
}
.the-arrow .shaft:before, .the-arrow .shaft:after { 
  background-color: #fff; 
  content: ''; 
  display: block; 
  height: 1px; 
  position: absolute; 
  top: 0; 
  left: 0; /* 把right改成left */
  transition: all 0.2s; 
  transition-delay: 0; 
}
.the-arrow .shaft:before { 
  transform-origin: top left; /* 从top right改成top left */
}
.the-arrow .shaft:after { 
  transform-origin: bottom left; /* 从bottom right改成bottom left */
}
.animated-arrow { 
  display: inline-block; 
  color: #fff; 
  font-size: 12px; 
  text-decoration: none; 
  position: relative; 
  transition: all 0.2s; 
}
.animated-arrow:hover { color: #eaeaea; }
/* 调整hover时左箭头的展开逻辑，适配左指向 */
.animated-arrow:hover .the-arrow.-left .shaft { 
  width: 64px; 
  transition-delay: 0.1s; 
  background-color: #eaeaea; 
}
.animated-arrow:hover .the-arrow.-left .shaft:before, .animated-arrow:hover .the-arrow.-left .shaft:after { 
  width: 8px; 
  transition-delay: 0.1s; 
  background-color: #eaeaea; 
}
.animated-arrow:hover .the-arrow.-left .shaft:before { transform: rotate(-40deg); }
.animated-arrow:hover .the-arrow.-left .shaft:after { transform: rotate(40deg); }
/* 调整main的位移方向，从translateX(80px)改成translateX(-80px) */
.animated-arrow:hover .main { transform: translateX(-80px); }
/* 调整hover时右箭头的收缩逻辑 */
.animated-arrow:hover .main .the-arrow.-right .shaft { 
  width: 0; 
  transform: translateX(-200%); /* 从translateX(200%)改成-200% */
  transition-delay: 0; 
}
.animated-arrow:hover .main .the-arrow.-right .shaft:before, .animated-arrow:hover .main .the-arrow.-right .shaft:after { 
  width: 0; 
  transition-delay: 0; 
  transition: all 0.1s; 
}
.animated-arrow:hover .main .the-arrow.-right .shaft:before { transform: rotate(0); }
.animated-arrow:hover .main .the-arrow.-right .shaft:after { transform: rotate(0); }
.animated-arrow .main { 
  display: flex; 
  align-items: center; 
  transition: all 0.2s; 
}
.animated-arrow .main .text { 
  margin: 0 0 0 16px; /* 把margin从0 16px 0 0改成0 0 0 16px，让文字在箭头左边 */
  line-height: 1; 
  font-family: 'Montserrat'; 
  text-transform: uppercase; 
}
.animated-arrow .main .the-arrow { position: relative; }

HTML部分（调整文字和箭头的顺序，适配左指向视觉逻辑） #

<div class="pivot-arrows-1" style="">
<a class="animated-arrow arrow-c-f" href="#">
<span class="main">
<span class="text"> Link Text </span>
<span class="the-arrow -left">
<span class="shaft"></span>
</span>
</span>
<span class="the-arrow -right">
<span class="shaft"></span>
</span>
</a>
</div>

核心修改点说明 #

• 伪元素定位与变换原点：把shaft:before/shaft:after的right:0改成left:0，变换原点从right改为left，这是让箭头方向反转的核心。
• 旋转角度调整：原右向箭头的伪元素旋转角度是40deg和-40deg，改成左向时要反转成-40deg和40deg，才能形成向左的箭头夹角。
• 动画位移方向：hover时main的translateX从正方向改成负方向，右箭头收缩时的位移也改成负方向，保证动画逻辑和左指向一致。
• 布局顺序调整：HTML里调整了文字和箭头的位置，让待展开的箭头在文字左侧，符合左指向的视觉逻辑。

这样修改后，箭头就会变成从右向左指向的动画效果，hover时的展开/收缩逻辑也完全适配新方向啦。

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