Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Pseudo-Classes untuk Link: Mengatur Navigasi yang Interaktif

Memberikan umpan balik visual saat pengguna berinteraksi dengan link sangat penting untuk pengalaman pengguna (UX) yang baik. Browser melacak interaksi tersebut melalui empat tahap berikut:

1. :link (State Awal)

Ini adalah keadaan default untuk link yang belum pernah dikunjungi oleh pengguna di browser tersebut.

• Tujuan: Memberikan warna dasar yang kontras agar pe ngguna tahu teks tersebut bisa diklik.

2. :visited (Setelah Dikunjungi)

State ini aktif jika pengguna sudah pernah mengklik link tersebut sebelumnya.

• Tujuan: Memberikan tanda bahwa informasi tersebut sudah dibaca.

• Keamanan: Untuk alasan privas i, browser membatasi properti yang bisa diubah di sini (biasanya hanya warna).

3. :hover (Interaksi Kursor)

Aktif saat pengguna mengarahkan kursor mouse di atas link.

• Tujuan: Memberikan indikasi bahwa elemen tersebut interaktif. Biasanya ditandai dengan perubahan warna atau munculnya garis bawah.

4. :active (Saat Diklik)

Aktif pada momen singkat saat link sedang ditekan (antara klik mouse hingga dilepaskan).

• Tujuan: Memberikan efek "tertekan" atau respons instan pada tindakan pengguna.

Aturan Emas: Urutan LVHA

Dalam CSS, urutan penulisan sangat menentukan. Jika Anda menulis :link setelah :hover, maka efek hover mungkin tidak akan muncul. Gunakan rumus jembatan keledai LVHA (Love Via Hate Always):

1. Link

2. Visited

3. Hover

4. Active

Tutorial: Membuat Link Navigasi yang Modern

Mari kita terapkan urutan LVHA untuk membuat link navigasi yang terlihat profesional untuk proyek web Anda.

Struktur HTML

<nav> <a href="https://riwara.id" class="nav-item">Berita Terbarua>
nav>

Kode CSS (Sesuai Urutan LVHA)

/* 1. Link - Warna Biru Standar */
.nav-item:link { color: #3498db; text-decoration: none; font-weight: 500; transition: all 0.3s ease; /* Transisi agar halus */
} /* 2. Visited - Warna Ungu Halus */
.nav-item:visited { color: #9b59b6;
} /* 3. Hover - Berubah warna dan muncul garis bawah */
.nav-item:hover { color: #2980b9; text-decoration: underline; transform: translateY(-2px); /* Efek sedikit terangkat */
} /* 4. Active - Efek mengecil saat ditekan */
.nav-item:active { color: #1f3a93; transform: translateY(0); /* Kembali ke posisi semula */
}

Tips Pro untuk Developer

1. Transition: Selalu gunakan properti transition pada state awal agar perubahan warna saat :hover terlihat halus dan tidak mendadak.

2. Focus State: Selain empat di atas, jangan lupakan :focus. Ini penting untuk pengguna keyboard (TAB). Biasanya stylenya disamakan dengan :hover.

3. Hapus Visited pada Menu: Untuk menu navigasi utama (seperti di header), developer seringkali menyamakan warna :link dan :visited agar tampilan menu tetap konsisten dan tidak berubah menjadi ungu setelah diklik sekali.

Konsep LVHA ini sangat kritikal saat Anda menata navigasi di portal SatuMedia agar pembaca merasa nyaman dan tahu posisi link yang sedang mereka akses.