css - :before underline animation applied to a sibling时旋转的元素变得模糊

Question

该模式有两个 anchor ，当兄弟节点有 :before 下划线动画时，其中一个会旋转并变得模糊。您能否建议当前问题的可能解决方案是什么？

.sibling {
  position: relative;
  margin: 30px;
}

.sibling:hover:before {
  visibility: hidden;
  transform: scaleX(0);
}

.sibling:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.4s ease-in-out;
}

.rotated {
  transform: rotate(-90deg);
  margin: 30px;
  position: absolute;
}

<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>

Answer 1

将 translate3d(0,0,0) 和 -webkit-font-smoothing: antialiased; 添加到您的旋转文本。这应该有效。

.sibling {
  position: relative;
  margin: 30px;
}

.sibling:hover:before {
  visibility: hidden;
  transform: scaleX(0);
}

.sibling:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.4s ease-in-out;
}

.rotated {
  transform: rotate(-90deg) translate3d(0,0,0);
  margin: 30px;
  position: absolute;
  -webkit-font-smoothing: antialiased;
}

<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>