Memberikan style link pseudo-classes pada CSS

Pada CSS Anda bisa mengatur hyperlink dengan menggunakan Anchor Pseudo-classes yang didalamnya terdap

Pada CSS Anda bisa mengatur style untuk link agar menjadi lebih interaktif. Salah satunya menggunakan anchor pseudo-classes. Sebuah link memiliki empat state yang berbeda, yaitu: linkvisitedactive dan hover. Keempat state ini dapat ditata secara berbeda melalui properti CSS atau dengan anchor pseudo-classes yang bisa Anda gunakan untuk menentukan gaya elemen <a> .

  • a: link – Normal, link yang belum dikunjungi
  • a: visited – Link pengguna yang telah dikunjungi
  • a: hover – Link ketika mouse pengguna di atasnya
  • a: active – Link saat itu diklik
a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover {
    color: blue;
}
a:active {
    color: orange;
}

Arahkan kursor mouse diatas link dan coba klik link tersebut agar Anda bisa melihat perubahannya.

Informasi: urutan kelas semua harus berurutan seperti: :link:visited:hover:active agar ini bekerja dengan baik.

Di semua browser web utama, tautan pada halaman web memiliki garis bawah dan menggunakan warna tautan default browser, jika Anda tidak menetapkan gaya khusus untuk mereka. Misalnya, warna tautan default di peramban web berbasis Gecko seperti Firefox adalah biru untuk belum dikunjungi, ungu untuk dikunjungi dan merah untuk tautan aktif.

Anda juga bisa memainkan hyperlink dengan style seperti tombol. Ini mendesain sebuah CSS untuk menampilkan link sebagai visual kotak atau tombol, yang tentunya bisa diklik.

a:link, a:visited {
    background-color: orange;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: red;
}

Anda juga bisa memainkan hyperlink dengan mengkombinasikan pada properti text-decoration.

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

Daftar anchor pseudo-classes

Anchor Pseudo-classesKegunaanya
a: linkNormal, link yang belum dikunjungi
a: visitedLink pengguna yang telah dikunjungi
a: hoverLink ketika mouse pengguna di atasnya
a: activeLink saat itu diklik