Text Decoration

Garis di bawah, di atas, atau menembus tengah teks membawa makna: tautan yang bisa diklik, catatan tambahan, atau harga yang sudah tidak berlaku. Seluruh garis itu dikendalikan keluarga property text-decoration — garis mana yang tampil, bentuknya, warnanya, hingga tebalnya. Pada chapter ini kita membedah empat longhand-nya, shorthand beserta urutan penulisannya, serta konvensi tautan yang tetap mudah dikenali walau garis bawahnya diubah.

Empat Longhand text-decoration #

.tautan-catatan {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #b45309;
  text-decoration-thickness: 2px;
}

Dengan memisahkan warna garis dari warna teks, tautan tetap jelas berbeda tanpa mengubah warna hurufnya.

Shorthand dan Urutannya #

Keempat nilai itu dapat dirangkai dalam satu shorthand text-decoration dengan urutan line, style, color, lalu thickness:

.tautan-catatan {
  text-decoration: underline wavy #b45309 2px;
}

Hanya line yang wajib; sisanya opsional dan boleh dilewati. Property pendamping yang sering ikut dipakai adalah text-underline-offset, yang menggeser garis bawah menjauh dari huruf agar tidak menyentuh ujung bawahnya.

Underline pada Tautan — dan Aturan Menghapusnya #

Garis bawah adalah petunjuk visual terkuat bahwa sebuah teks bisa diklik. Menghapusnya bukan hal terlarang, tetapi ada satu syarat: petunjuk lain harus menggantikan posisinya.

Pola yang aman justru menata ulang garisnya, bukan menghapusnya:

.tautan {
  color: #1f6f54;
  text-underline-offset: 3px;
  text-decoration-color: #9ed2b5;
}
.tautan:hover {
  text-decoration-color: #1f6f54;
  text-decoration-thickness: 2px;
}

Coret untuk Harga yang Berubah #

Garis line-through paling sering dipakai untuk harga lama. Pasangkan dengan elemen <del> yang secara semantik berarti “konten yang dihapus”, dan <ins> untuk penggantinya:

<p>Harga khusus minggu ini:
  <del>Rp150.000</del> <ins>Rp99.000</ins>
</p>

del { color: #8a9099; }
ins {
  color: #1f6f54;
  font-weight: 600;
  text-decoration: none;
}

Demo berikut merangkum tautan bergaya dan harga yang dicoret:

Browser sudah memberi del garis coret secara bawaan; CSS di atas hanya menyempurnakan warna dan menegaskan harga barunya. Keduanya memakai markup yang sama polos; yang membedakan hanya nilai text-decoration-nya.

Ringkasan #

Keluarga text-decoration mengendalikan garis teks dalam empat longhand — posisi, bentuk, warna, dan ketebalan — yang dirangkum shorthand dengan urutan line style color thickness. Untuk tautan, garis bawah boleh ditata ulang tetapi tidak boleh dihilangkan tanpa petunjuk pengganti; untuk harga, line-through dipasangkan dengan elemen <del> agar maknanya semantik. Berikutnya kita mengubah bentuk huruf itu sendiri tanpa menyentuh teks aslinya melalui text-transform.