πŸ”— CSS Link Style Generator

βš™οΈ Link State Styles

Configure styles for each link pseudo-class state.

πŸ”΅ Link Colors

px
underline none overline line-through dotted dashed wavy
2px
200ms

πŸ‘οΈ Live Preview

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

πŸ’» 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.