У овом сцреенцаст-у фокусирамо се на линије испод веза у горњем делу подножја. Некако се спотакнемо око проналажења ствари које би требало да имају релативно позиционирање, а шта не, како бисмо могли да добијемо ове линије величине и положаја који требају бити.
Линију обојимо градијентом користећи једноставну позадину Цомпасс @микин.
Одлучили смо да је постављање нивоа блокова веза прилично чудно, јер то чини подручје на које је могуће кликнути превелико. Знам да је то чудно рећи, јер обично је стварање подручја на које је могуће кликнути добро, али у овом случају можете кликнути толико далеко од текста везе, да је то једноставно чудно.
Треба напоменути да су на крају у подножју псеудо елементи који су креирали редове промењени у распони. То је зато што сам желео да им додам мало анимације приликом преласка курсором и тренутно не можете да користите прелазе или анимације на псеудо елементима у већини прегледача.
„Ласерска“ анимација завршила је на следећи начин (нека гнежђења су изостављена):
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); ) ) )