تأثير التحويم: توسيع متحرك لأسفل الحدود

في هذا السؤال، الهدف هو إنشاء تأثير تحويم يعمل على توسيع الحد السفلي لعنصر عند التحويم. لتحقيق هذا التأثير، يمكننا الاستفادة من خاصية التحويل ونقلها من 0 إلى 1 عند التمرير.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

يستخدم هذا الأسلوب عنصرًا زائفًا لفصل انتقال الحدود عن النص، مع الحفاظ على بنية HTML الأصلية. يمكن معالجة خاصية أصل التحويل لتوسيع الحدود من اتجاهات مختلفة، كما هو موضح أدناه:

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}