Cara menghilangkan garis bawah ( underline ) pada link html
pada tutorial cara membuat link html akan muncul garis bawah ( underline ) pada link.
di tutorial ini kita akan mencoba untuk menghapusnya.
secara default tampilan link akan muncul dalam sebagian browser sebagai berikut.
warna di atas default dan belum diubah warna link html dengan CSS
bagaimanakah cara menghilangkan garis bawah pada link html yang secara default ditampilakn oleh browser?
ada dua cara merubahnya, dengan inline style dan internal style menggunakan css
menghapus link garis bawah dengan inline style
tambahkan atribut style di dalam tag link, seperti <a style=””></a>, kemudian tambahkan kode css yang berfungsi untuk memberitahu link supaya tidak digaris bawahi yaitu text-decoration:none dan akan terlihat seperti kode dibawah ini
<a style="text-decoration:none" href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)
menghapus link garis bawah dengan internal style
jika pada tutorial pertama menggunakan inline style yang mencampurkan antara html dan css.
cara internal style memisahkan antara html dan css
<!DOCTYPE html>
<html>
<head>
<title> menghilangkan garis bawah ( underline ) </title>
<style>
.link-website {
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="https://thohirdev.com"> default link </a>
</p>
<p>
<a style="text-decoration:none" href="https://thohirdev.com"> website </a>
</p>
<p>
<a class="link-website" href="https://thohirdev.com"> website </a>
</p>
</body>
</html>
Code language: HTML, XML (xml)
hasilnya
Baca juga : fungsi class pada html
pada kode diatas akan menghapus link jika ditambahkan class link-website pada html, jika ingin menghapus semua link tanpa menambahkan class sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title> menghilangkan semua garis bawah ( underline ) </title>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="https://thohirdev.com"> default link </a>
</p>
<p>
<a style="text-decoration:none" href="https://thohirdev.com"> website </a>
</p>
<p>
<a class="link-website" href="https://thohirdev.com"> website </a>
</p>
</body>
</html>
Code language: HTML, XML (xml)
walaupun cara menghilangkan garis bawah pada link html bisa dilakukan, disarankan untuk menampilkan garis bawah.
karena membantu setiap orang yang mengunjungi website lebih mudah memahami dan membedakan antara link url dan bukan link.