इस पेंचकस में हम पाद के शीर्ष भाग में लिंक के नीचे की रेखाओं पर ध्यान केंद्रित करते हैं। हमें पता है कि किन चीजों में सापेक्ष स्थिति होनी चाहिए और क्या नहीं करना चाहिए।
हम सरल पृष्ठभूमि Compass @mixin का उपयोग करके एक ढाल के साथ लाइन को रंगीन करते हैं।
हम तय करते हैं कि लिंक ब्लॉक स्तर बनाना अजीब है, क्योंकि यह क्लिक करने योग्य क्षेत्र को बहुत बड़ा बनाता है। मुझे पता है कि कहने के लिए यह एक अजीब बात है क्योंकि आमतौर पर क्लिक करने योग्य क्षेत्रों को बड़ा बनाना अच्छा है, लेकिन इस मामले में आप लिंक पाठ से बहुत दूर क्लिक कर सकते हैं यह सिर्फ अजीब है।
यह ध्यान दिया जाना चाहिए कि अंततः पाद लेख में छद्म तत्व हैं जो लाइनों को बनाते हैं जहां स्पैन में बदल जाते हैं। ऐसा इसलिए है क्योंकि मैं उन्हें होवर पर एक छोटा सा एनीमेशन जोड़ना चाहता था और आप वर्तमान में अधिकांश ब्राउज़रों में छद्म तत्वों पर बदलाव या एनिमेशन का उपयोग नहीं कर सकते हैं।
"लेज़र" एनीमेशन इस प्रकार समाप्त हुआ (कुछ नेस्टिंग छोड़ा गया):
a ( color: white; /* etc */ > span ( position: absolute; pointer-events: none; bottom: 0; width: 100%; height: 1px; margin-bottom: 3px; left: 0; @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0))); background-position: 100% 0; @include background-size(200% 0); @include transition(background 0s linear); ) &:hover, &:focus ( color: $orange; > span ( background-position: -100% 0; @include transition(background 0.4s); ) ) )