Ketika Anda membuat tautan (hyperlink) dalam HTML, secara default, tautan tersebut akan muncul dengan garis bawah. Terkadang, Anda mungkin ingin menghapus garis bawah ini untuk mencapai desain yang lebih bersih atau untuk mematuhi panduan gaya tertentu. Berikut adalah cara untuk menghapus garis bawah dari tautan dengan menggunakan CSS.
Contoh Kode Asli
<a href="https://www.contoh.com">Tautan Saya</a>
Ketika tautan ini ditampilkan di browser, ia akan memiliki garis bawah secara otomatis. Namun, Anda bisa menghilangkan garis bawah tersebut menggunakan CSS. Mari kita lihat cara melakukannya.
Menghapus Garis Bawah Tautan Menggunakan CSS
Anda dapat menghapus garis bawah dari tautan dengan menambahkan CSS di dalam <style> atau di dalam file CSS terpisah. Berikut adalah contohnya:
Menggunakan Inline CSS
<a href="https://www.contoh.com" style="text-decoration: none;">Tautan Saya</a>
Menggunakan CSS di dalam <style>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Menghapus Garis Bawah Tautan</title>
<style>
a {
text-decoration: none; /* Menghapus garis bawah */
}
</style>
</head>
<body>
<a href="https://www.contoh.com">Tautan Saya</a>
</body>
</html>
Menggunakan CSS Kelas
Anda juga dapat menghapus garis bawah untuk tautan tertentu dengan menggunakan kelas CSS. Berikut adalah contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Menghapus Garis Bawah Tautan</title>
<style>
.tanpa-garis-bawah {
text-decoration: none; /* Menghapus garis bawah */
}
</style>
</head>
<body>
<a href="https://www.contoh.com" class="tanpa-garis-bawah">Tautan Saya</a>
</body>
</html>
Penjelasan
-
text-decoration: none;: Ini adalah properti CSS yang digunakan untuk menghilangkan elemen dekoratif seperti garis bawah pada teks. Dengan menggunakan nilai
none, garis bawah akan dihapus. -
Inline CSS vs Internal CSS: Penggunaan inline CSS hanya akan menghapus garis bawah pada tautan tersebut, sementara internal CSS akan menghilangkan garis bawah dari semua tautan dalam dokumen. Jika Anda ingin menargetkan tautan tertentu saja, pertimbangkan untuk menggunakan kelas CSS.
Contoh Praktis
Menghapus garis bawah dari tautan bisa sangat berguna dalam desain web. Misalnya, dalam desain minimalis atau saat tautan digunakan sebagai tombol, Anda mungkin tidak ingin garis bawah mengganggu tampilan keseluruhan. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengontrol bagaimana tautan ditampilkan.
Sumber Daya Berguna
Kesimpulan
Menghilangkan garis bawah dari tautan di HTML sangat mudah dengan memanfaatkan CSS. Anda dapat memilih untuk menerapkan perubahan secara global atau hanya pada tautan tertentu dengan penggunaan kelas. Metode ini akan membantu Anda membuat desain yang lebih sesuai dengan visi dan gaya yang Anda inginkan. Selamat mencoba!
