CSS Anchor States

Theory & Explanation

Anchor elements (<a>) are used to create hyperlinks in HTML. CSS provides pseudo-classes to style links based on their state, improving usability and accessibility. The five main anchor states are:

• :link — Unvisited links (default state). Applies to all <a> elements with an href that haven't been visited.
• :visited — Links the user has already visited. Browsers limit which properties can be styled for privacy.
• :hover — When the mouse pointer is over the link. Use for visual feedback.
• :active — When the link is being clicked (between mousedown and mouseup).
• :focus — When the link is focused (e.g., via keyboard navigation or mouse click). Essential for accessibility.

Order matters: Always use the LVHAF order in your CSS: :link, :visited, :hover, :active, :focus. This ensures all states are styled as expected.

How Anchor States Work

• Unvisited links are styled with :link until the user clicks them.
• Visited links change to :visited after the user visits the URL (if allowed by browser privacy).
• Hover and focus provide visual feedback for mouse and keyboard users.
• Active is a brief state while the link is being clicked.
• Browsers restrict :visited styling to color, background-color, border-color, and outline-color for privacy.

Accessibility & Best Practices

• Always provide a visible :focus style for keyboard users.
• Use :hover and :focus together for consistent experience.
• Style :visited to help users distinguish visited links, but avoid using sensitive color cues.
• Don't remove underline unless you provide another clear indicator (e.g., color, background, or border).
• Use semantic <a> elements for navigation and actions that change the page or context.