Dokumentasi CSS interaktif: Underline

Q: Bagaimana cara memberi garis bawah pada teks di CSS?

Pakai text-decoration: underline; pada elemennya. Untuk tampilan garisnya, tambahkan text-decoration-color, text-decoration-style, text-decoration-thickness, dan text-underline-offset.

Q: Bagaimana cara menghapus garis bawah dari link?

Atur text-decoration: none; pada elemen a. Pastikan link tetap menonjol dengan cara lain (warna ditambah garis bawah saat hover atau fokus), karena banyak pembaca mengandalkan garis bawah untuk mengenali link.

Q: Bagaimana cara mengubah warna garis bawah?

Pakai text-decoration-color, atau shorthand-nya: text-decoration: underline #f59e0b;. Tanpa itu, garisnya memakai warna teks.

Q: Bagaimana cara menambah jarak antara teks dan garis bawahnya?

Pakai text-underline-offset, misalnya text-underline-offset: 4px;. Nilai yang lebih besar memindahkan garisnya lebih jauh di bawah teks.

CSS Underline: text-decoration, Warna, Offset, Penghapusan

Beri garis bawah pada teks dengan text-decoration, lalu atur garisnya: warna, gaya, ketebalan, dan jaraknya dari teks. Di sini juga dibahas cara menghapus garis bawah dari link, dan kapan sebaiknya tidak kamu lakukan.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara memberi garis bawah pada teks di CSS

text-decoration: underline menggambar garis di bawah teks. Garis itu memakai warna teks, kecuali kamu memberinya warna sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

Baris kedua memakai shorthand text-decoration untuk jenis garis, gaya, dan warnanya, lalu mengatur ketebalan dan offset-nya dengan property masing-masing. Spesifikasinya juga memperbolehkan ketebalan ditulis di dalam shorthand, tetapi Safari membuang seluruh deklarasinya kalau kamu melakukannya, jadi tulis text-decoration-thickness secara terpisah.

Property text-decoration

Property	Nilai	Default
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (bisa digabung)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Warna apa pun	`currentColor` (warna teks)
`text-decoration-thickness`	Panjang, persentase, `auto`, `from-font`	`auto`
`text-underline-offset`	Panjang, persentase, `auto`	`auto`

text-decoration adalah shorthand untuk empat property pertama, tetapi jangan masukkan ketebalannya: Safari mengabaikan deklarasi text-decoration yang berisi ketebalan. text-underline-offset adalah property terpisah dan harus ditulis sendiri.

Gaya, warna, dan ketebalan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Memindahkan garis bawah: text-underline-offset

Secara default, garisnya berada dekat dengan huruf dan melompati bagian huruf yang turun ke bawah seperti g, p, dan y. text-underline-offset mendorongnya lebih ke bawah, yang sering kali terlihat lebih rapi pada judul dan link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Celah di sekitar bagian huruf yang turun itu berasal dari text-decoration-skip-ink: auto, yang aktif secara default. Atur ke none untuk garis yang tidak terputus.

Menghapus garis bawah dari link

Link diberi garis bawah oleh stylesheet bawaan browser. text-decoration: none menghapusnya. Karena banyak pembaca mengenali link dari garis bawahnya, munculkan lagi garis itu saat hover dan saat fokus keyboard, dan beri link warna yang berbeda dari teks:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Bar navigasi dan tombol adalah tempat yang wajar untuk menghilangkan garis bawah, karena posisinya sudah menunjukkan bahwa itu "link". Di dalam paragraf teks, pertahankan garis bawahnya. Penjelasan lebih lanjut tentang state link ada di halaman hover.

Overline dan line-through

text-decoration-line juga bisa menggambar garis di atas teks atau mencoretnya, dan menerima lebih dari satu nilai:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Coretan lewat CSS hanya bersifat visual. Kalau teksnya adalah konten yang dihapus (harga yang berubah, item yang dihilangkan), tandai dengan <s> atau <del>, seperti yang ditunjukkan di halaman HTML underline, supaya maknanya ada di markup, bukan hanya di styling.

Kesalahan yang sering terjadi

Memakai <u> untuk garis bawah sebagai gaya. <u> untuk teks yang ditandai berbeda, misalnya salah ketik. Untuk garis bawah sebagai gaya, pakai CSS.
Memberi garis bawah pada teks yang bukan link. Pembaca akan mencoba mengkliknya. Untuk penekanan, pakai huruf tebal, warna, atau background.
Menghapus garis bawah link di teks paragraf tanpa penanda lain. Warna saja tidak cukup bagi pembaca yang tidak bisa melihat perbedaannya.
Mencoba menghapus garis bawah elemen induk dari child. Garis itu tidak bisa dibatalkan dari dalam. Ubah elemen induknya atau jadikan child inline-block.
Mengira text-underline-offset ada di dalam shorthand. Itu property tersendiri.
Menaruh ketebalan di dalam shorthand. text-decoration: underline 2px berfungsi di Chrome dan Firefox, tetapi Safari membuang seluruh deklarasinya. Pakai text-decoration-thickness.

Pertanyaan yang sering diajukan

Bagaimana cara memberi garis bawah pada teks di CSS?

Pakai text-decoration: underline; pada elemennya. Untuk tampilan garisnya, tambahkan text-decoration-color, text-decoration-style, text-decoration-thickness, dan text-underline-offset.

Bagaimana cara menghapus garis bawah dari link?

Atur text-decoration: none; pada elemen a. Pastikan link tetap menonjol dengan cara lain (warna ditambah garis bawah saat hover atau fokus), karena banyak pembaca mengandalkan garis bawah untuk mengenali link.

Bagaimana cara mengubah warna garis bawah?

Pakai text-decoration-color, atau shorthand-nya: text-decoration: underline #f59e0b;. Tanpa itu, garisnya memakai warna teks.

Bagaimana cara menambah jarak antara teks dan garis bawahnya?

Pakai text-underline-offset, misalnya text-underline-offset: 4px;. Nilai yang lebih besar memindahkan garisnya lebih jauh di bawah teks.

Kenapa aku tidak bisa menghapus garis bawah dari elemen child?

Garis bawah yang digambar oleh elemen induk dilukis melintasi child-nya dan tidak bisa dihapus dari dalam child. Hapus garis itu di elemen yang mengaturnya, atau ubah child menjadi display: inline-block, yang tidak terjangkau dekorasi elemen induk.

Konsep terkait