Selles ekraanipildis keskendume jaluse ülemise osa linkide all olevatele joontele. Me komistame umbes, et välja selgitada, millistel asjadel peaks olema suhteline positsioon ja millistel mitte, et saaksime need jooned vajaliku suuruse ja asendiga.
Värvime joone gradiendiga, kasutades lihtsat tausta Compass @mixin.
Otsustame, et linkide blokeerimistaseme tegemine on üsna veider, sest see muudab klikitava ala liiga suureks. Ma tean, et see on veider öelda, sest tavaliselt on klõpsatavate alade suureks muutmine hea, kuid sellisel juhul võite klõpsata lingitekstist nii kaugel, et see on lihtsalt imelik.
Tuleb märkida, et lõppkokkuvõttes jaluses pseudoelemendid, mis lõid jooned, muutusid laiuseks. Selle põhjuseks on asjaolu, et tahtsin neile hõlma peal lisada väikese animatsiooni ja praegu ei saa enamikus brauserites pseudoelementidel üleminekuid ega animatsioone kasutada.
“Laseri” animatsioon lõppes järgmiselt (mõned pesitsused jäeti välja):
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); ) ) )