Belajar Koding HTML & CSS Bagian 25: Membuat Text Decoration

Penjelasan Text Decoration

Text Decoration adalah salah satu properti di CSS yang digunakan untuk memberikan efek garis dekoratif pada teks.

Dengan text-decoration, kita bisa:

· Menambahkan garis bawah (underline).

· Menambahkan garis atas (overline).

· Membuat teks dicoret (line-through).

· Menghapus dekorasi default (misalnya pada link) dengan none.

· Bahkan mengatur warna, gaya garis (solid, dashed, wavy), dan ketebalan garis pada teks.

Properti text-decoration di CSS digunakan untuk menambahkan dekorasi garis pada teks, seperti garis bawah, garis coret, garis atas, dan kombinasi lainnya

Beberapa properti yang terkait:

text-decoration-line : menentukan jenis garis dekorasi — underline, overline, line-through, atau none
text-decoration-color : menentukan warna dari garis dekorasi
text-decoration-style : menentukan gaya garis — misalnya solid, double, dotted, dashed, wavy
text-decoration-thickness (di dukung di browser-modern) : menentukan ketebalan garis dekorasi

text-decoration sendiri adalah shorthand yang bisa mengatur semuanya sekaligus (line + color + style + thickness) dalam satu baris.

Contoh nilai shorthand:

text-decoration: underline;

text-decoration: underline red;

text-decoration: underline dashed blue;

text-decoration: overline wavy green 3px;

Beberapa catatan penting:

Jika sebuah elemen memiliki dekorasi garis, dekorasi tersebut akan diterapkan ke semua teks turunannya (descendant) meskipun anaknya tidak punya text-decoration sendiri atau punya text-decoration: none.
Link (<a>) secara default biasanya memiliki garis bawah (underline). Jika ingin menghilangkan, bisa menggunakan text-decoration: none;.

Contoh Kode HTML + CSS dan Hasilnya

Berikut contoh lengkap HTML + CSS yang menampilkan berbagai variasi text-decoration:

<!DOCTYPE html>

<head>

<title>Contoh Text Decoration</title>

<style>

.underline {

text-decoration: underline;

}

.overline {

text-decoration: overline;

}

.line-through {

text-decoration: line-through;

}

.underline-overline {

text-decoration-line: underline overline;

text-decoration-color: purple;

text-decoration-style: dashed;

}

.wavy {

text-decoration: underline wavy blue;

}

.thick {

text-decoration: underline solid red 5px;

}

.no-decoration {

text-decoration: none;

}

a.custom-link {

text-decoration: none;

color: green;

}

</style>

</head>

<body>

<h2 class="underline">Ini teks dengan garis bawah (underline)</h2>

<h2 class="overline">Ini teks dengan garis atas (overline)</h2>

<h2 class="line-through">Ini teks dicoret (line-through)</h2>

Ini teks dengan garis bawah + garis atas, warna ungu dan bergaya dashed.

</p>

<p class="wavy">Ini teks dengan garis bergelombang (wavy underline)</p>

<p class="thick">Ini teks dengan garis merah tebal (5px)</p>

<p class="no-decoration">Ini teks tanpa dekorasi apapun</p>

<p>

Ini <a href="#" class="custom-link">link tanpa underline</a> meskipun defaultnya link punya underline.

</p>

</body>

</html>

Hasil Output Text Decoration

Hasil yang akan terlihat

Kalimat pertama akan memiliki garis bawah biasa.
Kalimat kedua memiliki garis atas.
Kalimat ketiga akan dicoret (garis tengah).
Kalimat dengan class .underline-overline akan punya garis bawah + garis atas, warna ungu, garis dashed.
.wavy akan menghasilkan garis bergelombang di bawah teks.
.thick akan menghasilkan garis bawah yang tebal dan warna merah.
.no-decoration tidak memiliki garis dekorasi sama sekali.
Link biasa dengan class .custom-link tidak memiliki underline meskipun secara default <a> punya underline, karena kita override dengan text-decoration: none.

Kalau kamu buka file HTML tersebut di browser, kamu akan langsung melihat perbedaan gaya yang dihasilkan.

Referensi Asli & Sumber

Beberapa referensi yang sangat bagus untuk text-decoration:

Penjelasan text-decoration

Properti text-decoration di CSS digunakan untuk menambahkan dekorasi garis pada teks, seperti garis bawah, garis coret, garis atas, dan kombinasi lainnya

Beberapa properti yang terkait:

text-decoration-line : menentukan jenis garis dekorasi — underline, overline, line-through, atau none
text-decoration-color : menentukan warna dari garis dekorasi
text-decoration-style : menentukan gaya garis — misalnya solid, double, dotted, dashed, wavy
text-decoration-thickness (di dukung di browser-modern) : menentukan ketebalan garis dekorasi

text-decoration sendiri adalah shorthand yang bisa mengatur semuanya sekaligus (line + color + style + thickness) dalam satu baris.

Contoh nilai shorthand:

text-decoration: underline;

text-decoration: underline red;

text-decoration: underline dashed blue;

text-decoration: overline wavy green 3px;

Beberapa catatan penting:

Jika sebuah elemen memiliki dekorasi garis, dekorasi tersebut akan diterapkan ke semua teks turunannya (descendant) meskipun anaknya tidak punya text-decoration sendiri atau punya text-decoration: none.
Link (<a>) secara default biasanya memiliki garis bawah (underline). Jika ingin menghilangkan, bisa menggunakan text-decoration: none;.

Referensi Asli & Sumber

Beberapa referensi yang sangat bagus untuk text-decoration:

Developer Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

W3chools: https://www.w3schools.com/css/css_text_decoration.asp

Geekforgeeks:https://www.geeksforgeeks.org/css/css-text-decoration-property

Malasa Ngoding: https://www.malasngoding.com/belajar-css-mengatur-format-text-dengan-css