होवर प्रभाव: बॉर्डर बॉटम का एनिमेटेड विस्तार

इस प्रश्न में, लक्ष्य एक होवर प्रभाव बनाना है जो होवरिंग पर किसी तत्व की निचली सीमा का विस्तार करता है। इस प्रभाव को प्राप्त करने के लिए, हम ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग कर सकते हैं और इसे होवर पर 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%;
}