Šiame ekrano vaizde mes sutelkiame dėmesį į linijas, esančias po nuorodomis viršutinėje poraštės dalyje. Mes kažkiek suklupome išsiaiškinę, kurie dalykai turėtų būti santykinai išdėstyti, o kokie ne, kad gautume šias linijas tokio dydžio ir padėties, kokios jie turi būti.
Mes spalviname liniją gradientu, naudodami paprastą foną Compass @mixin.
Mes nusprendžiame, kad nuorodų blokavimo lygis yra gana keistas, nes dėl to spustelėjama sritis yra per didelė. Aš žinau, kad tai keistas dalykas, nes paprastai spustelėjamas sritis paversti didelėmis, bet šiuo atveju galite spustelėti taip toli nuo nuorodos teksto, kad tai tiesiog keista.
Reikėtų pažymėti, kad galiausiai poraštėje pseudo elementai, sukūrę linijas, pasikeitė į ruožus. Taip yra todėl, kad norėjau pridėti šiek tiek animacijos prie jų, kai užveskite pelės žymeklį, ir šiuo metu daugumoje naršyklių negalite naudoti perėjimų ar animacijos pseudo elementuose.
„Lazerio“ animacija baigėsi taip (kai kurie lizdai praleisti):
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); ) ) )