العنصر الزائف before لا يظهر وكيف أطبق التأثير عليه

سبب المشكلة هو عدم وجود أبعاد للعناصر Before ظهر عرض العنصر ضمن أدوات المطور ب 0 * 2 أي بدون عرض.

لأنك وضعت خاصية scaleX بقيمة 0 ل before وبذلك لن يتعدل، خاصة عدم استهداف Hover

• حتى تعدل خاصية before من خلال عمل hover على الأب خاصته تضع تنسيق حسب المحدد hover:before:& للأب

&::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: all 0.3s ease;
}
&:hover:before {
  transform: scaleX(1);
  transition: all 0.3s ease;
}

النتيجة:

before after.webm