Apa yang Harus Diketahui
- Hilangkan garis bawah pada text link dengan properti CSS text-decoration dengan mengetikkan { text-decoration: none; } .
- Ubah garis bawah menjadi titik dengan properti gaya border-bottom a { text-decoration: none; border-bottom:1px bertitik; } .
- Ubah warna garis bawah dengan mengetikkan { text-decoration: none; border-bottom:1px merah solid; } . Ganti warna merah pekat dengan warna lain.
Artikel ini menjelaskan beberapa cara menggunakan CSS untuk mengubah tampilan default link teks di halaman web Anda dengan menghapus garis bawah, mengubahnya menjadi garis putus-putus, atau mengubah warnanya. Informasi tambahan disertakan untuk mengubah garis bawah menjadi garis putus-putus atau garis bawah ganda.
Cara Menghapus Garis Bawah pada Tautan Teks
Secara default, browser web memiliki gaya CSS tertentu yang diterapkan ke elemen HTML tertentu. Jika Anda tidak menimpa default ini dengan style sheet situs Anda sendiri, maka default berlaku. Untuk hyperlink, gaya tampilan default adalah setiap teks yang ditautkan berwarna biru dan bergaris bawah. Jika mau, Anda dapat mengubah tampilan garis bawah tersebut atau menghapusnya sepenuhnya dari halaman web Anda.
Untuk menghapus garis bawah dari tautan teks, Anda menggunakan dekorasi teks properti CSS. Inilah CSS yang Anda tulis untuk melakukan ini:
a { dekorasi teks: tidak ada; }
Dengan satu baris CSS itu, Anda menghapus garis bawah dari semua tautan teks di laman web Anda. Meskipun ini adalah gaya yang sangat umum (ia menggunakan pemilih elemen), ia masih memiliki kekhususan lebih daripada gaya browser default. Karena gaya default itulah yang membuat garis bawah untuk memulai, itulah yang perlu Anda timpa.
Perhatian untuk Menghapus Garis Bawah
Secara visual, penghapusan garis bawah mungkin persis seperti yang ingin Anda capai, tetapi Anda juga harus berhati-hati saat melakukannya. Apakah Anda menyukai tampilan tautan yang digarisbawahi atau tidak, Anda tidak dapat membantah bahwa tautan tersebut memperjelas teks mana yang ditautkan dan mana yang tidak. Jika Anda menghapus garis bawah atau mengubah warna tautan biru default, Anda harus memastikan bahwa Anda menggantinya dengan gaya yang masih memungkinkan teks tertaut menonjol. Ini akan membuat pengalaman yang lebih intuitif bagi pengunjung situs Anda.
Jangan Garis Bawahi Yang Bukan Tautan
Perhatian lain pada tautan dan garis bawah, jangan menggarisbawahi teks yang bukan tautan sebagai cara untuk menekankannya. Orang-orang berharap teks yang digarisbawahi menjadi tautan, jadi jika Anda menggarisbawahi konten untuk menambahkan penekanan (alih-alih membuatnya tebal atau miring), Anda mengirim pesan yang salah dan akan membingungkan pengguna situs.
Cara Mengubah Garis Bawah Menjadi Titik atau Garis
Jika Anda ingin mempertahankan tautan teks Anda digarisbawahi, tetapi mengubah gaya garis bawah itu dari tampilan default, yang merupakan garis “padat”, Anda juga dapat melakukannya. Alih-alih garis padat itu, Anda dapat menggunakan titik untuk menggarisbawahi tautan Anda. Untuk melakukannya, Anda tetap akan menghapus garis bawah, tetapi Anda akan menggantinya dengan properti gaya border-bottom:
a { dekorasi teks: tidak ada; border-bottom:1px bertitik; }
Karena Anda telah menghapus garis bawah standar, yang bertitik adalah satu-satunya yang muncul.
Anda dapat melakukan hal yang sama untuk mendapatkan tanda hubung. Ubah saja gaya border-bottom menjadi putus-putus:
a { dekorasi teks: tidak ada; border-bottom:1px putus-putus; }
Cara Mengubah Warna Garis Bawah
Cara lain untuk menarik perhatian ke tautan Anda adalah dengan mengubah warna garis bawah. Pastikan warnanya sesuai dengan skema warna Anda.
a { dekorasi teks: tidak ada; border-bottom:1px merah pekat; }
Garis Bawah Ganda
Trik untuk menggunakan garis bawah ganda adalah Anda harus mengubah lebar perbatasan. Jika Anda membuat batas selebar 1px, Anda akan berakhir dengan garis bawah ganda yang terlihat seperti satu garis bawah.
a { dekorasi teks: tidak ada; border-bottom:3px ganda; }
Anda juga dapat menggunakan garis bawah yang ada untuk membuat garis bawah ganda dengan fitur lain, seperti salah satu garis bertitik:
a {border-bottom:1px ganda; }
Jangan Lupakan Status Tautan
Anda dapat menambahkan gaya border-bottom ke tautan Anda di berbagai status seperti :hover, :active, atau :visited. Ini dapat menciptakan pengalaman gaya “rollover” yang bagus untuk pengunjung saat Anda menggunakan pseudo-class “hover”. Untuk memunculkan garis bawah bertitik kedua saat Anda mengarahkan kursor ke tautan:
a { dekorasi teks: tidak ada; }a:hover { border-bottom:1px bertitik; }