Neste screencast, focamos nas linhas abaixo dos links na parte superior do rodapé. Nós meio que tropeçamos tentando descobrir quais coisas devem ter posicionamento relativo e o que não deve, para que possamos obter essas linhas do tamanho e da posição que precisam ter.
Colorimos a linha com um gradiente usando o fundo simples Compass @mixin.
Decidimos que fazer o nível de bloqueio de links é bastante estranho, porque torna a área clicável muito grande. Eu sei que isso é uma coisa estranha de se dizer, porque geralmente aumentar as áreas clicáveis é bom, mas neste caso você pode clicar tão longe do texto do link é simplesmente estranho.
Deve-se notar que, em última análise, no rodapé, os pseudo-elementos que criaram as linhas foram alterados para extensões. Isso porque eu queria adicionar um pouco de animação a eles ao passar o mouse e você não pode usar transições ou animações em pseudoelementos na maioria dos navegadores no momento.
A animação “laser” terminou da seguinte forma (alguns aninhamentos omitidos):
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); ) ) )
