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

Posted on

Pada panduan CSS kali ini kita akan membahas beberapa efek yang didapat dengan mendekorasi teks, yaitu efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through). Properti yang akan kita gunakan yakni text-decoration. Kita akan mempelajari Cara Membuat Teks Underline, Overline, dan Line-through dengan CSS.


Cara membangun Underline, Overline, dan Line-through

Pemakaian property CSS text-decoration bagi memperoleh efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through) lumayan sederhana, kita tinggal menginput nilai tersebut selaku nilai properti dari text-decoration seperti contoh berikut ini:

Selain ketiga nilai tersebut, properti text-decoration mempunyai 2 nilai tambahan, yakni blink dan none. text-decoration: blink diperuntukkan bagi membangun teks berkedip (blink!) namun karena efeknya yang mengganggu, umumnya web browser modern melalaikan efek ini. Sedangkan bagi menghapus efek dekorasi teks, kita dapat menggunakan command text-decoration: none. Petunjuk none ini lazimnya digunakan bagi menghapus efek underline dari tag <a> yang adalah sebuah setingan bawaan web browser.

Selaku panduan kita kali ini, berikut yakni contoh kode HTML dan CSS dengan properti text-decoration:

 Pada contoh kode diatas, saya membangun class bagi masing-masing efek. Perhatikan bahwa class=”blink”, efek text-decoration: blink akan diabaikan oleh web browser.

Bagi class=”all”, saya membangun 3 efek pada 1 selector. Tiap-tiap nilai dipisahkan dengan spasi.

Kode CSS text-decoration: none bagi tag <a> di baris terakhir yakni pemakaian sangat sering bagi text-decoration. Menghapus efek garis bawah dari sebuah link membangun kita dapat mendesain link dengan lebih bagus, terutama seandainya tag <a> digunakan di fitur navigasi dari blog.


eBook CSS Uncover Duniailkom

Sekiranya sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/