In deze screencast concentreren we ons op de lijnen onder de links in het bovenste gedeelte van de footer. We struikelen een beetje rond om uit te zoeken welke dingen een relatieve positionering moeten hebben en wat niet, zodat we deze lijnen de grootte en positie kunnen geven die ze nodig hebben.
We kleuren de lijn in met een verloop met behulp van de eenvoudige achtergrond Compass @mixin.
We besluiten dat het nogal raar is om de links op blokniveau te maken, omdat dit het klikbare gebied te groot maakt. Ik weet dat het raar is om te zeggen, omdat het meestal goed is om klikbare gebieden groot te maken, maar in dit geval kun je zo ver van de linktekst klikken dat het gewoon raar is.
Opgemerkt moet worden dat uiteindelijk in de voettekst de pseudo-elementen die de regels creëerden, werden gewijzigd in overspanningen. Dit komt omdat ik er een kleine animatie aan wilde toevoegen tijdens het zweven en je op dit moment in de meeste browsers geen overgangen of animaties op pseudo-elementen kunt gebruiken.
De "laser" -animatie eindigde als volgt (sommige nesting weggelaten):
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); ) ) )