How Link Effects Work in CSS

Links have four distinct states in CSS, each with its own pseudo-class. The order in which you define them matters!

The Four Link States

/* 1. Default link — unvisited */
a:link {
    color: #3498db;
    text-decoration: none;
}

/* 2. Visited link */
a:visited {
    color: #8e44ad;
}

/* 3. Hover state — mouse over */
a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* 4. Active state — being clicked */
a:active {
    color: #e74c3c;
}

The LVHA Order

You must define link styles in this order: Link, Visited, Hover, Active. A common mnemonic is "LoVe HAte".

If you don't follow this order, some states may not work correctly due to the cascade.

Styling Links Practically

/* Modern, clean link styling */
a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

a:active {
    color: #1e40af;
}

Focus State for Accessibility

Don't forget :focus for keyboard navigation:

a:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}