Salah satu keuntungan membuat situs web pribadi saya dari awal daripada menggunakan tema yang sudah jadi adalah saya mulai dengan pengaturan browser default dan secara bertahap menambahkan warna saya sendiri. Saya mencoba menjaga situs agar tidak kembung, tetapi personalisasi adalah hal yang penting. Kita perlu menemukan kompromi antara halaman Spartan dari Hacker News dan Craigslist di satu sisi dan kemacetan MySpace lama di sisi lain.

Entah bagaimana saya menemukan sebuah situs web dengan garis bawah animasi yang bagus untuk tautan, dan saya ingin menyadari efeknya. Tetapi penting bagi saya untuk menggunakan CSS murni, karena demi hal-hal sepele seperti itu, tidak ada gunanya menambahkan JavaScript, yang dapat menyebabkan masalah dengan kinerja atau kegunaan antarmuka (lihat pembajakan bilah gulir ).

Seperti apa efeknya sekarang:

Implementasi

Menggambar garis di bawah teks adalah topik yang sangat kompleks . Itu semua tergantung pada seberapa jauh Anda siap menyimpang dari standar dan detail apa yang Anda khawatirkan (misalnya, melewati elemen surat jarak jauh ).

Saya mengeksplorasi dua pendekatan . Keduanya, pada dasarnya, menghapus dekorasi teks standar dan menambahkan perbatasan simulasi menggunakan elemen pseudo . Perbatasan ini kemudian dianimasikan oleh transisi CSS . Sayangnya, solusi ini memiliki satu kelemahan: mereka tidak bekerja secara normal jika tautannya mencakup lebih dari satu baris. Garis bawah hanya muncul di baris pertama.


Pada akhirnya, saya menemukan Shaw's CodePen , tanpa cacat ini, dan mengubah efeknya sesuai selera saya.


Ini kode yang relevan. Anda dapat bermain dengannya di repl.it.

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; } 

Mari kita pertimbangkan solusi ini secara lebih rinci.

Pertama, matikan text-decoration standar.

Kami harus menggunakan gambar latar belakang karena dapat menutupi beberapa baris. Meskipun Anda dapat mengambil gambar nyata, ini hanya garis, jadi kami menggunakan gradien linier yang akan menghasilkan gambar untuk kami. Biasanya ini digunakan untuk membuat gradien antara dua warna yang berbeda, tetapi kami membutuhkan garis bawah untuk warna yang sama dengan tautan, jadi kami menggunakan currentColor untuk awal dan akhir gradien. currentColor memberitahu browser untuk menggunakan warna elemen dari properti warna .

Gunakan posisi latar belakang untuk menempatkan gambar di sudut kiri bawah. Nilai 0% sesuai dengan posisi horizontal, dan 100% sesuai dengan posisi vertikal.

Matikan pengulangan latar belakang untuk mencegah beberapa contoh gambar.

Menggunakan ukuran latar belakang, tentukan lebar nol dan tinggi dua piksel. Lebar nol berarti garis bawah hanya muncul saat melayang, jika tidak gambar tidak akan terlihat.

Atur transisi agar sesuai dengan latar belakang, sehingga perubahan properti apa pun membutuhkan waktu 0.3 detik.

Saat Anda mengarahkan kursor ke tautan, kami mengubah lebar gambar sebesar 100% , membuat garis bawah penuh, dan transition menyediakan animasi.

Itu saja! Saya sangat senang dengan singkatnya kode. Jika Anda ingin menambahkan sesuatu yang mirip dengan situs Anda, silakan ambil implementasi ini atau lihat beberapa efek garis bawah animasi lainnya.