Alternatif CSS Untuk Text Underline

Awalnya mungkin sah – sah aja jika kita menggunakan text-decoration: underline di CSS untuk memberi garis bawah pada sebuah teks. Tetapi jika ditilik lebih lanjut, masalah akan muncul jika huruf berukuran besar (misal 80 pixel):

.text-line {
  font-size: 80px;
  text-decoration: underline;
}

Hasilnya akan seperti gambar di bawah, dimana underline-nya tampak tebal:

Alternatif CSS Untuk Text Underline
Default CSS underline

Mungkin bagi para designer yang peduli dengan web typography, tentunya akan sedikit “mengganggu”.

Ada alternatif untuk mengatasi hal tersebut, seperti yang digunakan di website Medium. Mereka menggunakan background untuk underline-nya. Contoh code:

.text-line {
  font-size: 80px;
  text-decoration: none;
  background-image: linear-gradient(#000000, #000000);
  background-position: 0 1em;
  background-size: 1px 1px;
  background-repeat: repeat-x;
}

Dengan memakai cara tersebut, ketebalannya bisa diatur menggunakan background-size. Hasilnya bisa dilihat pada gambar di bawah ini:

Alternatif CSS Untuk Text Underline
Alternatif underline dengan background-image

Selanjutnya, masih dengan cara yang sama. Kita bisa menambahkan multiple text-shadow sebagai pembungkus untuk huruf yang kita pakai. Supaya underline tidak terkesan menyatu dengan hurufnya (lihat pada huruf g dan p pada gambar di atas). Contoh code-nya seperti ini:

.text-line {
  font-size: 80px;
  text-decoration: none;
  background-image: linear-gradient(#000000, #000000);
  background-position: 0 1em;
  background-size: 1px 1px;
  background-repeat: repeat-x;
  text-shadow: 0.05em 0 0 red, -0.05em 0 0 red, 0 0.04em 0 red;
}

Biar lebih jelas, pada contoh code di atas, saya memakai warna merah (Red) untuk text-shadow-nya. Hasilnya seperti gambar di bawah ini:

Alternatif CSS Untuk Text Underline
Alternatif underline dengan text-shadow.

Jika text-shadow, diubah warnanya menjadi sama dengan background (warna putih), hasilnya akan seperti ini:

Alternatif CSS Untuk Text Underline
Alternatif underline final

Selesai, sekarang underline terkesan terpisah dengan hurufnya.

Yang harus diperhatikan

  1. Warna background website harus sama dengan warna text-shadow
  2. Setiap huruf punya karakteristik line-height yang berbeda, maka saat mengganti huruf text-shadow harus diatur ulang
  3. Saat user men-select teks, text-shadow harus dihilangkan

Final Code

Untuk lebih jelasnya, bisa kalian utak-atik di Codepen:

See the Pen CSS Text Underline by Yahya J Aifit (@yja) on CodePen.

Rujukan

  1. Smarter Link Underlines For Every Website
  2. Crafting link underlines on Medium
  3. Multiple text-shadow generator