Cara menghilangkan garis bawah ( underline ) pada link html

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.

saat link belum dikunjungi berwarna biru dan digaris bawahi
jika link sudah dikunjungi berwarna ungu dan digaris bawahi
link yang aktif berwarna merah dan digaris bawahi , untuk melihat tampilan tersebut tekan link sambil tahan mouse di dalam link tersebut maka akan berubah warnanya menjadi merah

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)
link yang secara default garis bawah sekarang hilang seperti gambar ini

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)
default link yang secara default garis bawah akan hilang tanpa menambahkan class, dan class link-website tersebut bisa dihapus

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.

  • Share
  • 31,841
  • byMuhammad Thohir S.Kom
  • Posted
  • Categories Tips

    • Tutorial Terbaru