V tem predvajanju zaslona se osredotočamo na vrstice pod povezavami v zgornjem delu noge. Nekako se spotaknemo, da bi ugotovili, katere stvari bi morale imeti relativno pozicioniranje in kaj ne, da bi lahko dobili te vrstice v velikosti in položaju, ki jih potrebujejo.
Črto obarvamo z gradientom s pomočjo preprostega ozadja Compass @mixin.
Odločimo se, da je postavitev ravni blokov povezav precej čudna, ker naredi klikljivo območje preveliko. Vem, da je to nenavadno reči, ker je običajno, da so območja, ki jih je mogoče klikniti, dobro, toda v tem primeru lahko kliknete tako daleč od besedila povezave, da je preprosto čudno.
Treba je opozoriti, da so na koncu v nogi psevdoelementi, ki so ustvarili črte, spremenjeni v razpone. To je zato, ker sem jim želel dodati malo animacije pri lebdenju in v večini brskalnikov trenutno ne morete uporabljati prehodov ali animacij na psevdoelementih.
"Laserska" animacija se je končala takole (nekaj gnezdenja je izpuščeno):
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); ) ) )