În acest ecran, ne concentrăm pe liniile de sub link-urile din partea de sus a subsolului. Ne cam împiedicăm să ne dăm seama ce lucruri ar trebui să aibă o poziționare relativă și ce nu, astfel încât să putem obține aceste linii dimensiunea și poziția de care trebuie să fie.
Colorizăm linia cu un gradient folosind fundalul simplu Compass @mixin.
Decidem că creșterea nivelului blocurilor de legături este destul de ciudată, deoarece face ca zona să poată fi făcută clic prea mare. Știu că este un lucru ciudat de spus, deoarece de obicei creșterea zonelor cu clicuri este bună, dar în acest caz puteți da clic atât de departe de textul link-ului, este ciudat.
Trebuie remarcat faptul că, în cele din urmă, în subsol pseudoelementele care au creat liniile au fost schimbate în întinderi. Acest lucru se datorează faptului că am vrut să le adaug un pic de animație la hover și nu puteți utiliza tranziții sau animații pe pseudoelemente în majoritatea browserelor în acest moment.
Animația „laser” s-a încheiat după cum urmează (unele cuiburi omise):
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); ) ) )