I den här skärmutsändningen fokuserar vi på linjerna under länkarna längst upp i sidfoten. Vi snubblar ganska runt för att ta reda på vilka saker som ska ha relativ positionering och vad som inte ska, så att vi kan få dessa linjer den storlek och position de behöver vara.
Vi färgar linjen med en lutning med hjälp av den enkla bakgrunden Compass @mixin.
Vi bestämmer att det är ganska konstigt att göra länkarnas blocknivå, eftersom det gör det klickbara området för stort. Jag vet att det är en konstig sak att säga eftersom det vanligtvis är bra att göra klickbara områden stora, men i det här fallet kan du klicka så långt bort från länktexten att det bara är konstigt.
Det bör noteras att slutligen i sidfoten pseudoelementen som skapade linjerna ändrades till spann. Detta beror på att jag ville lägga till en liten animation till dem på svävaren och att du inte kan använda övergångar eller animationer på pseudoelement i de flesta webbläsare just nu.
Animationen "laser" hamnade på följande sätt (en del häckande utelämnade):
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); ) ) )