W tym screencastie skupiamy się na liniach pod linkami w górnej części stopki. W pewnym sensie potykamy się, zastanawiając się, które rzeczy powinny mieć względne położenie, a które nie, abyśmy mogli uzyskać te linie w odpowiednim rozmiarze i położeniu.
Linię kolorujemy gradientem, używając prostego tła Compass @mixin.
Zdecydowaliśmy, że ustawienie poziomu blokowania linków jest raczej dziwne, ponieważ powoduje, że obszar klikalny jest zbyt duży. Wiem, że to dziwna rzecz, ponieważ zwykle powiększanie klikalnych obszarów jest dobre, ale w tym przypadku możesz kliknąć tak daleko od tekstu linku, że jest to po prostu dziwne.
Należy zauważyć, że ostatecznie w stopce pseudoelementy, które utworzyły linie, zostały zamienione na rozpiętości. Dzieje się tak, ponieważ chciałem dodać do nich małą animację po najechaniu kursorem i nie można obecnie używać przejść ani animacji na pseudoelementach w większości przeglądarek.
Animacja „laserowa” zakończyła się następująco (pominięto niektóre zagnieżdżanie):
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); ) ) )