Σε αυτό το screencast εστιάζουμε στις γραμμές κάτω από τους συνδέσμους στο πάνω μέρος του υποσέλιδου. Κάπως σκοντάφτουμε για να καταλάβουμε ποια πράγματα πρέπει να έχουν σχετική τοποθέτηση και τι δεν πρέπει, έτσι μπορούμε να πάρουμε αυτές τις γραμμές το μέγεθος και τη θέση που πρέπει να είναι.
Χρωματίζουμε τη γραμμή με μια κλίση χρησιμοποιώντας το απλό φόντο 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); ) ) )