Dalam screencast ini kami fokus pada garis di bawah tautan di bagian atas footer. Kami agak tersandung mencari tahu hal-hal mana yang harus memiliki posisi relatif dan apa yang tidak boleh sehingga kami bisa mendapatkan ukuran dan posisi garis-garis ini sebagaimana mestinya.
Kami mewarnai garis dengan gradien menggunakan latar belakang sederhana Kompas @mixin.
Kami memutuskan bahwa membuat level blok tautan agak aneh, karena itu membuat area yang dapat diklik terlalu besar. Saya tahu itu hal yang aneh untuk dikatakan karena biasanya membuat area yang dapat diklik menjadi besar itu bagus, tetapi dalam hal ini Anda dapat mengklik sangat jauh dari teks tautan itu hanya aneh.
Perlu dicatat bahwa pada akhirnya di footer elemen pseudo yang menciptakan garis di mana diubah menjadi span. Ini karena saya ingin menambahkan sedikit animasi ke dalamnya saat mengarahkan kursor dan Anda tidak dapat menggunakan transisi atau animasi pada elemen semu di sebagian besar browser saat ini.
Animasi "laser" berakhir sebagai berikut (beberapa bersarang 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); ) ) )