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

علي رزوقي · 20 يوليو 2022

عندي مشكلة مع العنصر الزائف before لم يعمل وقد قمت بالبحث عن الخلل أو حل و لم أجد

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

هل من الممكن المساعدة ؟

X1.zip

Wael Aljamal · 21 يوليو 2022

سبب المشكلة هو عدم وجود أبعاد للعناصر 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;
}