Rabu, Juli 21, 2021
BerandaTutorial Belajar CSSCara Membuat Teks Underline, Overline, dan Line-through - Text Decoration CSS

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

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

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
 cara memberi overline di android, cara menghilangkan underline di tengah kata dengan php, membuat garis underline dimana

Video Terbaru

RELATED ARTICLES

Apa yang anda pikirkan?

Most Popular