I denne skjermsendingen fokuserer vi på linjene under lenkene øverst i bunnteksten. Vi snubler ganske rundt for å finne ut hvilke ting som skal ha relativ posisjonering og hva som ikke skal, slik at vi kan få disse linjene i størrelse og posisjon de trenger å være.
Vi fargelegger linjen med en gradient ved hjelp av den enkle bakgrunnen Compass @mixin.
Vi bestemmer oss for at det å gjøre koblingene blokkert er ganske rart, fordi det gjør det klikkbare området for stort. Jeg vet at det er en rar ting å si, fordi det vanligvis er bra å gjøre klikkbare områder store, men i dette tilfellet kan du klikke så langt borte fra lenketeksten at det bare er rart.
Det skal bemerkes at til slutt i bunnteksten ble pseudoelementene som skapte linjene endret til spenner. Dette er fordi jeg ønsket å legge til en liten animasjon til dem på sveve, og at du ikke kan bruke overganger eller animasjoner på pseudo-elementer i de fleste nettlesere for øyeblikket.
"Laser" -animasjonen endte som følger (noen hekk utelatt):
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); ) ) )