I denne screencast fokuserer vi på linjerne under linkene i den øverste del af sidefoden. Vi snubler lidt rundt med at finde ud af, hvilke ting der skal have relativ positionering, og hvad der ikke skal, så vi kan få disse linjer i den størrelse og position, de skal være.
Vi farvelægger linjen med en gradient ved hjælp af den enkle baggrund Compass @mixin.
Vi beslutter, at det at gøre linkene blokeret er ret underligt, fordi det gør det klikbare område for stort. Jeg ved, det er en underlig ting at sige, fordi det normalt er godt at gøre klikbare områder store, men i dette tilfælde kan du klikke så langt væk fra linkteksten, det er bare underligt.
Det skal bemærkes, at i sidste ende i sidefoden blev de pseudoelementer, der skabte linjerne, ændret til spændvidder. Dette skyldes, at jeg ønskede at tilføje en lille animation til dem, mens du holder musen, og at du ikke kan bruge overgange eller animationer på pseudoelementer i de fleste browsere i øjeblikket.
"Laser" animationen endte som følger (nogle nesting udeladt):
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); ) ) )