Cara Membuat Teks Underline, Overline, dan Line-through – Text Decoration CSS

Membuat Teks Bergaris bawah (underline), text bergaris atas (Overline), dan Text tercoret/garis ditengah text (Line-through) dalam css bisa kita buat dengan memanfaatkan property Text Decoration CSS.

Membuat Underline, Overline, dan Line-through CSS

property Text Decoration adalah salah satu property untuk mendekorasi text, seperti mendapatkan efek garis dibawah text, membuat efek garis di tengah text, membuat efeck garis diatas text.

pengunaan property text-decoration juga sangat mudah karena property text-decoration ini hanya memiliki 4 nilai atau value. yaitu terdiri dari overline, line-through, underline dan note, dimana nilai note ini hanya berfungsi untuk menghapus efek dari nilai yang diterapkan.

contoh penggunaan

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

menurut reference dari situs w3schools.com property text-decoration ini cocok digunakan untuk tag heading.

untuk lebih memahami apa itu property text-decoration dan penerapan nilai nya saya akan membuatkan contoh Membuat Teks Underline, Overline, dan Line-through dengan property Text Decoration CSS dibawah ini:

Contoh Text Decoration

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {
  text-decoration: overline;
  }
  h2 {
  text-decoration: line-through;
  }
  h3 {
  text-decoration: underline;
  }
  p.under { text-decoration: underline; }
  p.over  { text-decoration: overline; }
  p.line  { text-decoration: line-through; }
  p.all   { text-decoration: underline overline line-through; }
  a      { text-decoration: none; }
  }
  </style>
  </head>
  <body>
<h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <p class="under">Contoh Teks dengan underline</p>
  <p class="over">Contoh Teks dengan overline</p>
  <p class="line">Contoh Teks dengan line-through</p>
  <p class="all">Contoh Gabungan efek text-decoration</p>
  <a href="https://phpdanmysql.com">Link ke phpdanmysql.com Tanpa Underline</a>
  </body>
  </html>

Penjelasan:

dalam contoh diatas saya membuat 3 heading, h1,h2, dan h3, ketiga heading ini memakai property text-decoration, lihat hasil dari ketiga nilai dari property text-decoration, overline membuat garis diatas, line-through akan membuat garis ditengah-tegah tulisan seperti tercoret, lalu nilai underline untuk membuat garis dibawah tulisan.

dalam contoh diatas saya juga membuat efek text-decoration pada tiap tag p. dimana saya menambahkan selector p.all dan mengabungkan nilai text-decoration. tidak lupa pula saya membuat nilai none yang berfungsi menghapus efek underline pada link, karena secara default link dibrowser akan bergaris bawah.

ada satu nilai yang tidak saya bahas disini yaitu nilai blink, contohnya text-decoration: blink. fungsi nilai ini untuk membuat tulisan berkedip, namun nilai ini sudah tidak dipakai lagi untuk saat ini, jadi kita juga tidak usah mempelajarinya.

dari uraian diatas setidaknya anda sudah paham

  1. membuat tulisan bergaris bawah dengan property text-decoration: underline
  2. membuat tulisan tercoret dengan property text-decoration: Line-through
  3. membuat tulisan bergaris atas property text-decoration: overline
  4. serta menghapus garis bawah pada link

sampai disini tutorial Cara Membuat Teks Underline, Overline, dan Line-through menggunakan property Text Decoration CSS ini semoga dapat bermanfaat

 

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas