CSS Links

CSS Links: Styling Pseudo-Classes, Buttons, and Hover States

CSS link properties allow you to style HTML anchor tags (<a>), customizing colors, underlines, background buttons, and interactive state transitions when hovering or focusing.

Link State Pseudo-Classes

Links support five distinct interactive state pseudo-classes:

/* 1. Unvisited link */
a:link { color: #38bdf8; text-decoration: none; }

/* 2. Visited link */
a:visited { color: #818cf8; }

/* 3. Mouse hover state */
a:hover { color: #60a5fa; text-decoration: underline; }

/* 4. Keyboard focus state */
a:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* 5. Mouse click active state */
a:active { color: #1d4ed8; }

The strict order rule for link states (LVHA):

• :link → :visited → :hover → :active (Remember: Love Virtual Hate All).

Link State Priority Pipeline

flowchart TD
    A["Link Pseudo-Class Order (LVHA Rule)"] --> B[":link (Default unvisited link)"]
    B --> C[":visited (Visited URL history link)"]
    C --> D[":hover (Mouse pointer hovering over link)"]
    D --> E[":active (Mouse button currently pressed down)"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Links Demonstration</title>
    <style>
        .nav-link {
            color: #94a3b8;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 4px;
            transition: color 0.2s ease, background-color 0.2s ease;
        }
        .nav-link:hover {
            color: #38bdf8;
            background-color: #1e293b;
        }
        .nav-link:focus-visible {
            outline: 2px solid #38bdf8;
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <h2>Styled Navigation Link</h2>
    <a href="#" class="nav-link">Documentation Docs ↗</a>

</body>
</html>

Best Practices

• Follow the LVHA declaration order: Always write :link, :visited, :hover, :active in exact sequence so hover styles override unvisited states.
• Ensure high contrast on hover states: Verify hover colors remain legible against background surfaces.
• Add smooth CSS transitions for hover state feedback: Add transition: color 0.2s ease for polished UI interactive feel.

Self-Check Challenge

Write CSS rules for .link setting :link color to #38bdf8 and :hover color to #34d399 with text-decoration: underline!