Tässä kuvaruudussa keskitymme alaviitteen yläosan linkkien alla oleviin viivoihin. Olemme tavallaan kompastumassa sen selvittämiseksi, millä asioilla tulisi olla suhteellinen sijainti ja millaisilla ei, jotta voimme saada nämä viivat koon ja sijainnin, jonka heidän on oltava.
Väritämme viivan kaltevuudella käyttämällä yksinkertaista taustakompassia @mixin.
Päätämme, että linkkien estotason tekeminen on melko outoa, koska se tekee napsautettavan alueen liian suureksi. Tiedän, että se on outo asia sanoa, koska yleensä napsautettavien alueiden tekeminen suureksi on hyvä, mutta tässä tapauksessa voit napsauttaa niin kaukana linkkitekstistä, että se on vain outoa.
On huomattava, että lopulta alatunnisteessa pseudoelementit, jotka loivat viivat, muuttuivat jänneväliksi. Tämä johtuu siitä, että halusin lisätä heihin pienen animaation hiirellä eikä et voi käyttää siirtymiä tai animaatioita pseudoelementeissä useimmissa selaimissa tällä hetkellä.
"Laseri" -animaatio päätyi seuraavasti (jotkut pesinnät jätetty pois):
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); ) ) )