CSS: Cara Membuat Teks Underline, Overline, dan Line-through

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Teks Underline, Overline, dan Line-through.

Penggunaan property CSS text-decoration untuk mendapatkan efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through) cukup sederhana, kita tinggal menginput nilai tersebut sebagai nilai properti dari text-decoration.

Contoh:

Selain ketiga nilai tersebut, properti text-decoration memiliki 2 nilai tambahan, yakni blink dan none. text-decoration: blink ditujukan untuk membuat teks berkedip (blink!) namun karena efeknya yang mengganggu, umumnya web browser modern mengabaikan efek ini. Sedangkan untuk menghapus efek dekorasi teks, kita bisa menggunakan perintah text-decoration: none. Perintah none ini biasa digunakan untuk menghapus efek underline dari tag <a> yang merupakan setingan bawaan web browser.

Contoh penggunaan properti text-decoration:

Dalam contoh kode diatas, saya membuat class untuk masing-masing efek. Perhatikan bahwa class=”blink”, efek text-decoration: blink akan diabaikan oleh web browser. Untuk class=”all”, saya membuat 3 efek dalam 1 selector. Tiap-tiap nilai dipisahkan dengan spasi.

Kode CSS text-decoration: none untuk tag <a> pada baris terakhir adalah penggunaan paling sering untuk text-decoration. Menghapus efek garis bawah dari sebuah link membuat kita bisa mendesain link dengan lebih baik, terutama jika tag <a> digunakan pada menu navigasi dari website.

Sekian Cara Membuat Teks Underline, Overline, dan Line-through.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb