रेडी-मेड थीम का उपयोग करने के बजाय स्क्रैच से मेरी निजी वेबसाइट बनाने का एक फायदा यह है कि मैं डिफ़ॉल्ट ब्राउज़र सेटिंग्स से शुरू करता हूं और धीरे-धीरे अपने रंग जोड़ता हूं। मैं साइट को सूजन से दूर रखने की कोशिश करता हूं, लेकिन निजीकरण एक महत्वपूर्ण चीज है। हैकर समाचार और क्रेगलिस्ट के संयमी पन्नों के बीच एक तरफ समझौता करना और दूसरी ओर पुराने माइस्पेस की भीड़ को खोजना आवश्यक है।

किसी तरह मैं लिंक के लिए फैंसी एनिमेटेड अंडरस्कोर के साथ एक वेबसाइट पर आया था, और मैं प्रभाव का एहसास करना चाहता था। लेकिन शुद्ध सीएसएस का उपयोग करना मेरे लिए महत्वपूर्ण है, क्योंकि इस तरह की तुच्छ चीजों के लिए, यह जावास्क्रिप्ट को जोड़ने के लायक नहीं है, जो इंटरफ़ेस के प्रदर्शन या प्रयोज्य के साथ समस्याएं पैदा कर सकता है ( स्क्रॉलबार को हाईजैक करना देखें)।

यहाँ अब क्या प्रभाव दिखता है:

कार्यान्वयन

पाठ के अंतर्गत रेखाएँ खींचना आश्चर्यजनक रूप से जटिल विषय है । यह सब इस बात पर निर्भर करता है कि आप मानक से विचलित होने के लिए कितने तैयार हैं और आपको किन विवरणों की चिंता है (उदाहरण के लिए, अक्षरों के दूरस्थ तत्वों से गुजरना )।

मैंने दो दृष्टिकोणों का पता लगाया। दोनों, संक्षेप में, मानक पाठ-सजावट को हटाते हैं और छद्म तत्वों का उपयोग करके एक नकली सीमा जोड़ते हैं । यह सीमा सीएसएस संक्रमण द्वारा एनिमेटेड है। दुर्भाग्य से, इन समाधानों में एक खामी है: वे सामान्य रूप से काम नहीं करते हैं यदि लिंक एक से अधिक रेखाओं को कवर करता है। पहली पंक्ति में ही अंडरलाइन दिखाई देता है।


अंत में, मैंने शॉ के कोडपेन को पाया, इस दोष से रहित, और मेरे स्वाद के प्रभाव को बदल दिया।


यहाँ प्रासंगिक कोड है। आप उसके साथ repl.it पर खेल सकते हैं।

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; } 

आइए इस समाधान पर अधिक विस्तार से विचार करें।

सबसे पहले, मानक text-decoration बंद करें।

हमें एक पृष्ठभूमि छवि का उपयोग करना होगा क्योंकि यह कई लाइनों को कवर कर सकती है। यद्यपि आप एक वास्तविक चित्र ले सकते हैं, यह सिर्फ एक पंक्ति है, इसलिए हम एक रैखिक ढाल का उपयोग करते हैं जो हमारे लिए एक छवि उत्पन्न करेगा। आमतौर पर इसका उपयोग दो अलग-अलग रंगों के बीच एक ढाल बनाने के लिए किया जाता है, लेकिन हमें लिंक के समान रंग होने के लिए अंडरलाइन की आवश्यकता होती है, इसलिए हम ढाल के शुरुआत और अंत दोनों के लिए वर्तमान रंग का उपयोग करते हैं। currentColor ब्राउज़र को रंग संपत्ति से तत्व के रंग का उपयोग करने के लिए कहता है।

छवि को निचले बाएँ कोने में रखने के लिए पृष्ठभूमि-स्थिति का उपयोग करें। 0% का मान क्षैतिज स्थिति से मेल खाता है, और 100% एक ऊर्ध्वाधर स्थिति से मेल खाता है।

छवि के कई उदाहरणों को रोकने के लिए पृष्ठभूमि-दोहराएँ को बंद करें।

पृष्ठभूमि-आकार का उपयोग करके , शून्य चौड़ाई और दो पिक्सेल की ऊंचाई निर्दिष्ट करें। शून्य चौड़ाई का मतलब है कि अंडरलाइन केवल होवर पर दिखाई देती है, अन्यथा चित्र दिखाई नहीं देता है।

पृष्ठभूमि को फिट करने के लिए संक्रमण सेट करें, इसलिए किसी भी संपत्ति परिवर्तन में 0.3 सेकंड लगते हैं।

जब आप किसी लिंक पर होवर करते हैं, तो हम एक पूर्ण रेखांकन बनाते हुए छवि की चौड़ाई को 100% बदल देते हैं, और transition एनीमेशन प्रदान करता है।

वह सब है! मैं कोड की संक्षिप्तता से बहुत प्रसन्न हूं। यदि आप अपनी साइट के समान कुछ जोड़ना चाहते हैं, तो इसे लागू करने के लिए स्वतंत्र महसूस करें या कुछ अन्य एनिमेटेड अंडरलाइन प्रभाव देखें ।