Hapus Tautan Garis Bawah atau Buat Tautan Bertitik, atau Tautan Bergaris Ganda
Secara default, web browsershave gaya CSS tertentu yang mereka berlaku untuk elemen HTML tertentu. Jika Anda tidak menimpa default ini dengan style sheet situs Anda sendiri, maka default akan berlaku. Untuk hyperlink, gaya tampilan default adalah bahwa teks yang ditautkan akan berwarna biru dan digarisbawahi. Browser melakukan ini sehingga pengunjung situs dapat dengan mudah melihat teks apa yang ditautkan. Banyak perancang web yang tidak peduli dengan gaya bawaan ini, terutama yang digarisbawahi. Untungnya, CSS memudahkan untuk mengubah tampilan yang digarisbawahi atau menghapusnya sepenuhnya.
Menghapus Garis bawah pada Tautan Teks
Teks yang digarisbawahi bisa lebih menantang untuk membaca teks yang tidak digarisbawahi. Selain itu, banyak desainer tidak peduli dengan tampilan tautan teks bergaris bawah. Dalam hal ini, Anda mungkin ingin menghapus garis bawah ini sama sekali.
Untuk menghapus garis bawah dari tautan teks, Anda akan menggunakan hiasan teks properti CSS. Berikut ini CSS yang akan Anda tulis untuk melakukan ini:
sebuah {text-decoration: none; }
Dengan satu baris CSS, Anda akan menghapus garis bawah dari semua tautan teks. Meskipun ini adalah gaya yang sangat umum (menggunakan pemilih elemen), ia masih memiliki kekhususan lebih dari gaya peramban bawaan. Karena gaya default tersebut adalah apa yang menciptakan garis bawah untuk memulai, itulah yang perlu Anda timpa.
Perhatian untuk Menghapus Garis Besar
Secara visual, penghapusan garis bawah mungkin persis apa yang ingin Anda capai, tetapi Anda harus berhati-hati ketika Anda melakukan hal ini juga. Apakah Anda menyukai tampilan tautan yang digarisbawahi atau tidak, Anda tidak dapat membantah bahwa mereka membuatnya jelas seperti teks mana yang ditautkan dan mana yang tidak. Jika Anda mengambil garis bawah atau mengubah warna tautan biru default, Anda harus memastikan bahwa Anda menggantinya dengan gaya yang masih memungkinkan teks tertaut untuk menonjol. Ini akan membuat pengalaman yang lebih intuitif untuk pengunjung situs Anda.
Jangan Menggarisbawahi Non-Tautan
Peringatan lain pada tautan dan garis bawah, jangan menggarisbawahi teks yang bukan tautan sebagai cara untuk menekankannya. Orang-orang mengharapkan teks yang digarisbawahi sebagai tautan, jadi jika Anda menggarisbawahi konten untuk menambahkan penekanan (alih-alih membuatnya tebal atau cetak miring), Anda mengirim pesan yang salah dan akan membingungkan pengguna situs.
Ubah Underline menjadi Dots atau Dashes
Jika Anda ingin menjaga agar tautan teks Anda digarisbawahi, tetapi ubah gaya yang digarisbawahi dari tampilan default, yang merupakan garis "soldi", Anda juga dapat melakukan hal ini. Alih-alih garis tebal itu, Anda bisa menggunakan titik untuk menggarisbawahi tautan Anda. Untuk melakukan ini, Anda masih akan menghapus garis bawah, tetapi Anda akan menggantinya dengan properti gaya batas-bawah:
sebuah {text-decoration: none; border-bottom: 1px bertitik; }Karena Anda telah menghapus garis bawah standar, yang bertitik satu adalah satu-satunya yang muncul.
Anda dapat melakukan hal yang sama untuk mendapatkan garis. Cukup ubah gaya batas bawah menjadi putus-putus:
sebuah {text-decoration: none; border-bottom: 1px berlari; }Ubah Warna Garis Bawah
Cara lain untuk menarik perhatian pada tautan Anda adalah dengan mengubah warna garis bawah. Pastikan saja warnanya sesuai dengan skema warna Anda.
sebuah {text-decoration: none; border-bottom: 1px merah solid; }Menggarisbawahi Ganda
Trik untuk menggunakan garis bawah berganda adalah Anda harus mengubah lebar batas. Jika Anda membuat batas lebar 1px, Anda akan berakhir dengan garis bawah ganda yang tampak seperti garis bawah tunggal.
sebuah {text-decoration: none; border-bottom: 3px ganda; }Anda juga dapat menggunakan garis bawah yang ada untuk membuat garis bawah ganda dengan fitur lain, seperti salah satu garis yang bertitik:
sebuah {border-bottom: 1px double; }Jangan Lupakan Negara Tautan
Anda dapat menambahkan gaya batas-bawah ke tautan Anda di berbagai negara seperti: hover,: aktif, atau: dikunjungi. Ini dapat menciptakan pengalaman gaya "rollover" yang bagus bagi pengunjung ketika Anda menggunakan kelas pseudo "hover". Untuk membuat garis bawah bertitik kedua muncul saat Anda mengarahkan kursor ke tautan:
sebuah {text-decoration: none; } a: hover {border-bottom: 1px dotted; }Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard