Cara Menghilangkan Garis Bawah Pada Link Menggunakan CSS

Beberapa hari yang lalu saya membuat sebuah desain untuk author box di blog, ketika saya memasukkan kode untuk membuat URL pada bagian nama ternyata link tersebut memiliki garis bawah.

Kemudian saya cek kembali kode css yang saya tulis dan ternyata memang benar ada kode css yang belum saya masukkan untuk mengatur link atau URL tersebut.

Link atau tautan yang memiliki garis bawah (underline) memang terlihat kurang enak dilihat, jadi saya ingin menghilangkan garis bawah yang ada pada link tersebut dengan menggunakan kode css.

Bagi yang masih awam dengan kode-kode bahasa pemrograman seperti HTML dan CSS mungkin masih bingung ketika membuat link kok malah ada garis bawahnya.

Sama saya juga memang masih bingung pada awal-awalnya, tapi setelah saya pelajari lagi akhirnya bisa juga untuk menghapus garis bawah (underline) pada link khususnya saya coba di blogger ya.

Cara Menghilangkan Garis Bawah Pada Link Dengan CSS

Contoh kode HTML pada URL/Link yang memiliki garis bawah (underline) :

<a href="https://www.caramanual.com" title="Cara Manual">Cara Manual</a>

Hasilnya:
Cara Manual

Untuk mengilangkan garis bawah pada link tersebut, tambahkan kode css text-decoration:none untuk penerapannya seperti di bawah ini :

Versi 1
Menghilangkan garis bawah pada link dengan menggunakan kode css, ini berlaku untuk semua link.

Tambahkan kode ini di atas kode ]]></b:skin> atau </style>

a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}

Keterangan:
a:link setiap link tidak akan menampilkan garis bawah.
:visited setiap link yang pernah di klik tidak akan menampilkan garis bawah.
a:hover setiap link ketika di sentuh cursor di atasnya tidak akan menampilkan garis bawah.

Kode baris pertama wajib Anda gunakan untuk menghilangkan garis bawah pada link atau URL, untuk baris kedua dan ketiga merupkana opsional tambahan, tapi saran saya gunakan saja semuanya.

Versi 2
Mengilangkan garis bawah atau underline pada hyperlink dengan menerapkannya langsung dibagian kode HTML, ini hanya akan menghilangkan garis pada link itu saja.

Misalnya kode HTML seperti ini:

<a href="https://www.caramanual.com" title="Cara Manual">Cara Manual</a>

Lalu tambahkan kode style="text-decoration:none" di dalamnya, untuk penerapannya seperti di bawah ini:

<a style="text-decoration:none" href="https://www.caramanual.com" title="Cara Manual">Cara Manual</a>

Nah, itulah beberapa cara untuk menyembunyikan atau menghilangkan garis bawah pada link di blog atau website sangat mudah bukan? silahkan Anda coba terapkan sendiri.

Sebenarnya masih ada cara lain untuk menghilangkan garis bawah pada url blog, namun agak sedikit rumit jadi saya hanya menjelaskannya yang mudah di pahami oleh semua orang.

Sekian artikel mengenai cara menghilangkan garis bawah pada link menggunakan css, jika ada masukkan atau pertanyaan silahkan hubungi kami melalui halaman kontak, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini