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

Dalam tutorial 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 adalah text-decoration. Kita akan mempelajari Cara Membuat Teks Underline, Overline, dan Line-through dengan CSS.


Cara membuat 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 seperti contoh berikut ini:

span.under {
   text-decoration: underline;
}
span.over {
   text-decoration: overline;
}
span.line {
   text-decoration: line-through;
}

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.

Sebagai tutorial kita kali ini, berikut adalah contoh kode HTML dan CSS dengan properti text-decoration:

<!DOCTYPE html>
<html>
<head>
<title>Belajar text-decoration</title>
<style type="text/css">
   .under { text-decoration: underline; }
   .over  { text-decoration: overline; }
   .line  { text-decoration: line-through; }
   .blink { text-decoration: blink; }
   .all   { text-decoration: underline overline line-through; }
   a      { text-decoration: none; }
</style>
</head>
<body>
   <h2>Belajar CSS: text-decoration</h2>
  
   <p class="under">Teks dengan underline sering disangka dengan link</p>
   <p class="over">Teks dengan overline mungkin berguna</p>
   <p class="line">Teks dengan line-through digunakan untuk koreksi</p>
   <p class="blink">Efek blink diabaikan oleh web browser</p>
   <p class="all">Semua efek text-decoration dalam satu selector</p>
   <a href="https://www.duniailkom.com">Ini adalah link 
   tanpa efek garis bawah</a>
</body>
</html>

Tutorial Belajar CSS - Contoh Cara membuat teks Underline Overline dan Line-throughDalam 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.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

2 Comments

  1. Ahost
    14 Apr 19
    • Andre
      14 Apr 19

Add Comment