Dalam screencast ini, kita memfokuskan pada garis di bawah pautan di bahagian atas footer. Kami agak mencari tahu perkara mana yang seharusnya mempunyai kedudukan relatif dan apa yang tidak seharusnya sehingga kami dapat memperoleh ukuran dan kedudukan yang sesuai dengan garis ini.
Kami mewarnai garis dengan kecerunan menggunakan latar belakang ringkas Compass @mixin.
Kami memutuskan bahawa membuat tahap blok pautan agak pelik, kerana menjadikan kawasan yang dapat diklik terlalu besar. Saya tahu itu adalah perkara yang pelik kerana biasanya menjadikan kawasan yang dapat diklik adalah besar, tetapi dalam kes ini, anda boleh mengklik jauh dari teks pautan itu hanya pelik.
Harus diingat bahawa pada akhirnya di footer unsur-unsur semu yang mencipta garis di mana berubah menjadi span. Ini kerana saya ingin menambahkan sedikit animasi pada mereka pada hover dan anda tidak boleh menggunakan peralihan atau animasi pada elemen semu di kebanyakan penyemak imbas pada masa ini.
Animasi "laser" berakhir seperti berikut (beberapa sarang dihilangkan):
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); ) ) )