Halo, jumpa kembali dengan saya, pada pertemuan kali ini saya akan berbagi tutorial mengenai bagaimana Cara Membuat Animasi Hover Garis Bawah dengan CSS3, garis bawah atau yang biasa kita sebut underline pada sebuah website memang kurang menarik untuk kita lihat, nah bagaimana jika garis bawah kita beri sedikit style supaya terlihat tidak bosan untuk dilihat.

Nah bagaimana caranya ? caranya cukup mudah, silahkan simak langkah-langkahnya berikut ini.

Pertama kita akan membaut kode HTML seperti berikut untuk membuat sebuah objek berupa tulisan atau teks bebas, seperti berikut.

Kalian bisa menambahkan jenis huruf dengan kode ini.

Kemudian, kita lanjutkan pada bagian kode CSS nya untuk memberikan style garis bawah pada teks nya dengan kode berikut.

Setelah semua kode diatas diketikan, selanjutnya simpan terlebih dahulu, kemudian coba buka pada browser masing-masing dan lihat hasilnya.

Bagaimana, mudah dan hasilnya terlihat menarik bukan ? baiklah cukup sekian tutorial mengenai bagaimana Cara Membuat Animasi Hover Garis Bawah dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

DEMO