Text Decoration

Garis pada teks membawa makna: garis bawah menandai tautan, garis tengah menandai teks yang dicoret, dan garis berombak menandai kesalahan ejaan. Properti text-decoration beserta empat properti detailnya mengatur semua garis tersebut — posisinya, warnanya, bentuknya, dan tebalnya. Kita mulai dari nilai garis yang tersedia, lalu membedah empat properti pendetail yang membuat dekorasi dapat disesuaikan dengan identitas desain.

Nilai Garis: underline, overline, line-through #

Properti text-decoration-line (atau langsung shorthand text-decoration) menerima underline untuk garis bawah, overline untuk garis di atas teks, line-through untuk garis mencoret, dan none untuk menghapus semua garis. Nilai garis dapat digabung dalam satu deklarasi, misalnya text-decoration-line: underline line-through menghasilkan dua garis sekaligus.

Perlu kita ingat bahwa elemen <a> diberi garis bawah oleh stylesheet bawaan browser. Menghapusnya dengan text-decoration: none adalah keputusan desain yang sah, tetapi dari sisi aksesibilitas, garis bawah adalah isyarat visual paling kuat bahwa sebuah teks bisa diklik. Jika garis bawah dihilangkan, pastikan tautan tetap terbedakan melalui warna yang kontras, ketebalan, atau indikator lain — dan tidak bergantung pada warna saja untuk pembaca dengan penglihatan warna terbatas.

Empat Properti Pendetail #

Shorthand text-decoration sebenarnya membungkus empat properti longhand yang masing-masing bisa ditulis terpisah:

Secara bawaan, warna garis mengikuti currentColor, artinya garis ikut berubah warna mengikuti teksnya. Bila garis perlu berbeda dari teks — misalnya tautan berwarna biru dengan garis bawah yang lebih lembut — text-decoration-color mengambil alih. Ketebalan bawaan diserahkan ke font (auto), namun nilai eksplisit membantu saat garis bawaan terlihat terlalu tipis pada ukuran huruf besar.

Perlu diingat bahwa shorthand text-decoration menyetel ulang semua detailnya: menulis text-decoration: underline; pada aturan yang sama dengan text-decoration-color yang ditulis lebih dulu akan mengembalikan warna garis ke bawaan, karena shorthand mengatur ulang seluruh properti yang dibungkusnya. Urutan yang aman adalah menulis shorthand dahulu, lalu properti longhand-nya di bawahnya.

.tautan {
  text-decoration: underline;
  text-decoration-color: rgb(59, 130, 246);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.coret {
  text-decoration: line-through;
  text-decoration-style: wavy;
}

Mari kita telaah baris demi baris:

1. Baris 2 (text-decoration: underline;): mengaktifkan garis bawah; sisa detail mengikuti nilai bawaan.
2. Baris 3–4: garis diberi warna biru khusus dan tebal tetap 2px, terlepas dari ukuran font.
3. Baris 5 (text-underline-offset: 3px;): properti pendamping yang menggeser garis bawah menjauh dari teks agar tidak menyentuh huruf berpangkal turun seperti g atau y.
4. Baris 8–9 (.coret): garis mencoret berbentuk gelombang, pola yang dipakai editor teks untuk menandai ejaan keliru.

Hasil di Browser:

Baris demo tampil dengan lima variasi dekorasi: garis bawah polos,
garis bawah berwarna merah rgb(220, 38, 38), garis bawah berombak
(wavy), garis bawah setebal 3px, dan teks tanpa garis sama sekali.
Nilai computed masing-masing tercatat pada text-decoration-line
("underline" dan "none"), text-decoration-color, text-decoration-style,
dan text-decoration-thickness ("3px").

Satu hal yang menarik dari properti ini: garis dekorasi tidak diwariskan ke anak, tetapi teks anak “dilewati” oleh garis induknya, sehingga garis tetap menyambung di balik elemen dalam. Browser juga menghindari garis menimpa pangkal huruf yang turun seperti g, y, dan p — perilaku yang disebut skip-ink dan aktif secara bawaan; bila garis harus digambar utuh menembus semua huruf, properti text-decoration-skip-ink: none menonaktifkannya.

Untuk garis bawah pada tautan, pasangan yang nyaman dipakai adalah text-decoration-thickness dalam em dan text-underline-offset sekitar 3–4px: garis turun sedikit dari teks, terlihat lebih rapi, dan tetap jelas berbeda dari garis bawah bawaan. Sembari berlatih dekorasi, properti spasi berikutnya — Letter Spacing dan Word Spacing — mengatur jarak halus antar huruf dan antarkata.