What are the four CSS link pseudo-classes?

:link (unvisited), :visited (visited), :hover (mouse over), :active (being clicked). Remember the order with LoVe/HAte (Link-Visited-Hover-Active).

What is the correct CSS link order?

The correct order is :link → :visited → :hover → :active (LoVe/HAte). Wrong order can cause styles to not apply properly due to CSS specificity.

How do I remove underline from links?

Use text-decoration: none; to remove the default underline. To show underline only on hover, set a { text-decoration: none; } a:hover { text-decoration: underline; }.

Can I use different colors for each link state?

Yes, set color for each pseudo-class independently. Example: a:link { color: #06b6d4; } a:visited { color: #8b5cf6; } a:hover { color: #f59e0b; } a:active { color: #ef4444; }.

Free CSS Link Style Generator - Link States Styling Tool

← Back to Home

Updated: 2026-07-11

⚙️ Link State Styles

Configure styles for each link pseudo-class state.

🔵 Link Colors

:link Color

:hover Color

:active Color

:visited Color

Font Size px

Text Decoration

underline none overline line-through dotted dashed wavy

Underline Offset 2px

Show underline on hover Bold on hover Background on hover

Transition Duration 200ms

👁️ Live Preview

Hover over and click the links to see state changes in action.

Try these link states:

📌 Normal Link (hover me) 🔗 Visited Link (click me) ⚡ Active Link (hold me)

💻 CSS Code

📖 CSS Link Styling Explained

CSS links use pseudo-classes to define different interaction states. The four states follow the LoVe/HAte rule: :link → :visited → :hover → :active.

text-decoration Property

Modern CSS supports combined text-decoration values: text-decoration: underline dotted #ff0000 controls line style, thickness, and color simultaneously. Supported in Chrome 76+, Firefox 70+, Safari 12.1+.

Transition Effects

Smooth transitions between link states improve user experience. Use 150-300ms duration for natural-feeling state changes.

🔗 CSS Link Style Generator