Summarize this article with:
Links look the same on most websites. Blue, underlined, forgettable.
That default styling does the job, but it wastes an opportunity to strengthen your visual hierarchy and brand identity.
CSS link styles control how anchor elements appear across hover, visited, active, and focus states. Master the pseudo-class selectors, and you control how users perceive clickable interactive elements throughout your site.
This guide covers practical CSS link styles examples you can copy and adapt. You’ll learn the LVHA selector order, styling properties that actually matter, accessible focus indicators, and production-ready patterns for navigation menus and body text.
Code included. No fluff.
What is a CSS Link Style
A CSS link style is a set of visual properties applied to anchor elements through pseudo-class selectors, controlling how hyperlinks appear in different interaction states like unvisited, visited, hovered, and active.
Browsers apply default styling to the <a> tag: blue color for unvisited links, purple for visited, and an underline via the CSS text-decoration property.
You override these user agent stylesheet defaults with custom rules.
How the Anchor Element Works in CSS
The HTML anchor tag <a> with an href attribute creates clickable text.
It renders as an inline element by default, sitting within paragraph flow.
“ a { color: #0066cc; text-decoration: underline; } `
Why CSS Link Styles Matter for User Experience
Clear link styling signals clickability, a core user experience principle.
WCAG 2.1 requires links to be distinguishable without relying on color alone.
Proper hover and focus states provide visual feedback during mouse and keyboard interaction.
CSS link style examples
Modern CSS Link Styles Collection
See the Pen
Modern CSS Link Styles Collection by Bogdan Sandu (@bogdansandu)
on CodePen.
Subtle Link Animations
See the Pen
Subtle link animations. by Josip Psihistal (@butsuri)
on CodePen.
Links as Buttons
See the Pen
Link as a Button by CSS-Tricks (@css-tricks)
on CodePen.
CSS Link Style Compilation
See the Pen
Link Style Compilation by Teegan Lincoln (@teeganlincoln)
on CodePen.
Underline Hover Test
See the Pen
Underline hover test by Elwin van den Hazel (@elwinvdhazel)
on CodePen.
Animated Font Weight On Hover
See the Pen
Animated font weight on hover by Jesper Strange Klitgaard Christiansen (@jesperkc)
on CodePen.
Blinking Link Effect
See the Pen
Blinking Link Effect by MDS (@mds)
on CodePen.
Squiggle Link Effects
See the Pen
Link Effectz – Squiggle by Geoff Graham (@geoffgraham)
on CodePen.
Cool CSS3 Link Ideas
See the Pen
Cool CSS3 Link Ideas by Brenden Palmer (@brenden)
on CodePen.
Spring Bounce Hover Effect
See the Pen
Spring/Bounce Hover Effect by Mark Mead (@markmead)
on CodePen.
Menu Hover Line Effect
See the Pen
Menu Hover Line Effect by Mehmet Burak Erman (@mburakerman)
on CodePen.
Button And Link Styles
See the Pen
Button and link styles by Kyle Hyams (@kylehyams)
on CodePen.
Anchor Click Canvas Animation
See the Pen
Anchor Click Canvas Animation by Nick Sheffield (@nicksheffield)
on CodePen.
Underline Link Effect
See the Pen
Underline Link Effect by Eina O (@thelittleblacksmith)
on CodePen.
Slice Link Text
See the Pen
Slice link text by Mattia Astorino (@equinusocio)
on CodePen.
CSS3 Keyframes Animation Link Style
See the Pen
CSS3 Keyframes Animation Link Style by Agustin Sevilla (@auginator)
on CodePen.
Multi-line Link Hover Effect
See the Pen
Multi-line Link Hover Effect by Antoinette Janus (@internette)
on CodePen.
Gradient Link Style
See the Pen
Gradient Link Style by Andy Fought (@andyfought)
on CodePen.
Menu Link Effect
See the Pen
Menu Link Effect for WordPress by Ravenous (@ravenous)
on CodePen.
Links With Marginalia Notes
See the Pen
Links with Marginalia Notes, version 2 by Amelia Bellamy-Royds (@AmeliaBR)
on CodePen.
Anchor Hover Effects
See the Pen
Anchor Hover Effects by Sim G (@simgooder)
on CodePen.
Inline Link Styles
See the Pen
Inline Link Styles by Jeff McCarthy (@jeffmccarthyesq)
on CodePen.
Pure CSS Link with Rainbow Underline Effect
See the Pen
Pure CSS Link with Rainbow Underline Effect by freefrontend.com (@cssparadise)
on CodePen.
Jumping Link Hover Effect
See the Pen
Jumping link hovers by Bennett Feely (@bennettfeely)
on CodePen.
Animated Gradient Underline For Link Hover State
See the Pen
Animated Gradient Underline for Link Hover State by George W. Park (@GeorgePark)
on CodePen.
Link Hover Effects
See the Pen
Link Hover Effects by Peiwen Lu (@P233)
on CodePen.
CSS Link Effects
See the Pen
css link effects, by sam van der Heijden by Sam van der Heijden (@samvdh)
on CodePen.
Link Style Tests
See the Pen
Link Style Tests by Nick Ciliak (@nickcil)
on CodePen.
Link Highlight Hover/Click Effect
See the Pen
Link Highlight Hover/Click Effect by Emily Hayman (@eehayman)
on CodePen.
CSS Link Effects By uNick
See the Pen
CSS link effects by uNickHow (@uNickHow)
on CodePen.
Strikethrough Link Hover Effect
See the Pen
Strikethrough hover-effect by Artyom (@artyom-ivanov)
on CodePen.
Text Underline Hover Effects
See the Pen
Text underline hover effects by Misha Heesakkers (@MishaHahaha)
on CodePen.
Laser Revealed Title Link
See the Pen
Laser revealed title link by JFarrow (@JFarrow)
on CodePen.
Magnetic Link Style CSS UI Effect
See the Pen
Magnetic UI effect by Ryan Yu (@iamryanyu)
on CodePen.
Link Hover Arrow Idea
See the Pen
Link Hover Arrow Idea by Gabrielle Wee (@gabriellewee)
on CodePen.
Cool CSS link hover animation
See the Pen
Cool CSS3 Link Ideas by Brenden Palmer (@brenden)
on CodePen.
Single Element Link Styling
See the Pen
Single Element Link Styling by Alex Bergin (@abergin)
on CodePen.
Three Fancy Link Hover Effects
See the Pen
Three Fancy Link Hover Effects by James Hancock (@jhancock532)
on CodePen.
What Are the CSS Pseudo-Classes for Links
Five pseudo-class selectors control link states: :link, :visited, :hover, :active, and :focus.
The LVHA order matters for CSS specificity and cascade behavior.
` a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: orange; } `
How the :link Pseudo-Class Targets Unvisited Links
The :link selector matches anchor elements the browser hasn’t recorded in history.
It only applies to tags with an href attribute present.
How the :visited Pseudo-Class Styles Clicked Links
The :visited pseudo-class targets links already in browser history.
Modern browsers restrict which properties work here due to history sniffing security concerns.
You can only change: color, background-color, border-color, outline-color.
How the :hover Pseudo-Class Creates Mouse Interaction
The :hover state activates when the cursor pointer moves over a link.
Common CSS hover effects include color shifts, underline changes, and background highlights.
Touch devices handle this state differently since there’s no persistent hover.
How the :active Pseudo-Class Indicates Click State
The :active selector fires during the brief moment between mousedown and mouseup.
This provides click feedback, confirming the interaction registered.
How the :focus Pseudo-Class Supports Keyboard Navigation
The :focus state triggers when users tab to a link or programmatically set focus.
Never remove the outline property without providing an alternative focus indicator.
This is a core web accessibility requirement under WCAG Success Criterion 2.4.7.
What is the Correct Order for CSS Link Selectors
The LVHA rule defines selector order: :link, :visited, :hover, :active.
This sequence ensures each state displays correctly based on CSS cascade rules.
Placing :hover after :visited prevents visited styling from overriding hover effects.
How Selector Specificity Affects Link States
All link pseudo-classes share equal specificity weight.
When specificity ties, the rule appearing later in the stylesheet wins.
` / Wrong order - hover never shows / a:hover { color: red; } a:visited { color: purple; }
/ Correct LVHA order / a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: orange; } `
What CSS Properties Change Link Appearance
Primary styling properties include color, text-decoration, background-color, border-bottom, padding, and transition.
These control visual presentation across all link states.
How to Change Link Color with the color Property
Set link color using hex (#0066cc), rgb(0, 102, 204), hsl(210, 100%, 40%), or named values.
Maintain a 4.5:1 color contrast ratio against the background for accessibility compliance.
` a:link { color: #0066cc; } a:visited { color: #551a8b; } a:hover { color: #004499; } `
How to Remove or Modify Link Underlines
The text-decoration property controls underline display.
- text-decoration: none
removes the underline
- text-decoration-color
changes underline color independently
- text-decoration-style
sets solid, dotted, dashed, or wavy
- text-decoration-thickness
adjusts line weight
` a { text-decoration: underline; text-decoration-color: #ff6600; text-decoration-thickness: 2px; } `
How to Add Background Color to Links
Background highlights increase click target visibility, especially on hover.
Add padding to expand the clickable area around the text.
` a:hover { background-color: #fff3cd; padding: 2px 4px; } `
How to Create Custom Underlines with border-bottom
Using border-bottom instead of text-decoration gives you offset control and animation options.
` a { text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; } `
How to Add Smooth Transitions to Link Styles
The transition property animates state changes for polished micro-interactions.
Specify which properties transition, duration, and timing function.
` a { color: #0066cc; transition: color 0.2s ease-in-out; }
a:hover { color: #ff6600; } `
What Are Common CSS Link Style Patterns
Production websites use repeatable patterns: underline removal on hover, color shifts, background highlights, animated underlines, and button-style links.
Underline That Disappears on Hover
A classic pattern where text-decoration removes on mouse interaction.
` a { text-decoration: underline; }
a:hover { text-decoration: none; } `
Color Change on Hover
Shifting color on hover provides clear visual feedback without layout changes.
` a:link, a:visited { color: #0066cc; }
a:hover, a:active { color: #ff3300; } `
Background Highlight on Hover
Adding background-color and border-radius creates a highlighted button-like effect.
` a { padding: 4px 8px; transition: background-color 0.2s; }
a:hover { background-color: #e6f2ff; border-radius: 4px; } `
Animated Underline Effect
Pseudo-elements create underlines that grow from center or slide in from left.
` a { position: relative; text-decoration: none; }
a::after { content: ”; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: currentColor; transition: width 0.3s; }
a:hover::after { width: 100%; } `
Button-Style Link
Converting links to button designs works for call-to-action elements.
Set display to inline-block, add padding, background-color, and border-radius.
` a.button { display: inline-block; padding: 12px 24px; background-color: #0066cc; color: white; text-decoration: none; border-radius: 6px; }
a.button:hover { background-color: #004499; } `
How to Style Links in Navigation Menus
Navigation link styling requires larger click targets, clear active state indication, and consistent spacing across menu items.
Flexbox containers with gap properties create even distribution without margin calculations.
How to Create Horizontal Navigation Links
Set the nav container to display: flex with gap spacing, then remove default list-style from ul elements.
` nav { display: flex; gap: 24px; }
nav a { text-decoration: none; padding: 8px 16px; color: #333; }
nav a:hover { color: #0066cc; } `
Padding on anchor tags expands the clickable area beyond text boundaries.
This technique improves usability for touch and mouse users alike.
How to Indicate the Current Page Link
Use the aria-current=”page” attribute to mark the active navigation item, then target it with CSS.
` nav a[aria-current="page"] { font-weight: bold; border-bottom: 2px solid currentColor; } `
How to Style Links in Different Contexts
Links inside body text need different treatment than menu links or footer links.
Descendant selectors let you apply contextual rules without adding classes everywhere.
How to Style Links Inside Paragraphs
Inline links within paragraphs should retain underlines for inclusive design compliance.
Keep the color distinct from surrounding text while maintaining readability.
` article p a { color: #0066cc; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
article p a:hover { text-decoration-thickness: 2px; } `
How to Style Links in Footer Sections
Footer links often appear on dark backgrounds, requiring inverted color schemes.
` footer a { color: #ccc; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; } `
How to Make CSS Link Styles Accessible
Accessible link styling follows WCAG 2.1 guidelines: 4.5:1 contrast ratio, visible focus indicators, and multiple visual cues beyond color alone.
Check your work with tools like WebAIM Contrast Checker or Chrome DevTools.
How to Test Link Color Contrast
Calculate contrast ratio between link color and background using the accessibility checklist approach.
Minimum 4.5:1 for normal text; 3:1 for large text (18px+ or 14px bold).
- #0066cc on white = 4.5:1 ratio (passes AA)
- #0099ff on white = 3.0:1 ratio (fails for body text)
How to Style Focus States for Keyboard Users
The outline property creates visible focus rings during tab navigation.
Never use outline: none without providing an alternative indicator.
` a:focus { outline: 2px solid #0066cc; outline-offset: 2px; }
a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } `
The :focus-visible selector shows focus only for keyboard users, hiding it during mouse clicks.
How to Indicate Links Without Relying on Color Alone
WCAG Success Criterion 1.4.1 requires non-color indicators for users with color vision deficiency.
Combine multiple cues:
- Underlines (text-decoration or border-bottom)
- Font weight changes
- Icons after external links using SVG or pseudo-elements
` a[href^="http"]::after { content: " ↗"; font-size: 0.8em; } `
Related CSS Concepts for Link Styling
Link styling connects to broader frontend concepts: cascade order, selector specificity, inheritance, and CSS custom properties.
How the Cascade Affects Link States
Equal-specificity rules follow source order; later declarations override earlier ones.
The LVHA order exists because of this cascade behavior, not arbitrary convention.
Using CSS Variables for Link Theming
Custom properties enable consistent link colors across components and easy theme switching.
` :root { --link-color: #0066cc; --link-hover: #004499; --link-visited: #551a8b; }
a:link { color: var(–link-color); } a:visited { color: var(–link-visited); } a:hover { color: var(–link-hover); } `
Dark mode? Just redefine the variables inside a media query.
` @media (prefers-color-scheme: dark) { :root { --link-color: #6db3f2; --link-hover: #a8d4ff; } } `
Testing Link Styles Across Browsers
Default link styling varies between Chrome, Firefox, Safari, and Edge.
Use a CSS reset or normalize stylesheet to establish consistent baselines for cross-browser compatibility.
Test visited states by clearing browser history or using incognito mode.
FAQ on CSS Link Styles
What is the correct order for CSS link pseudo-classes?
The LVHA order is :link, :visited, :hover, :active. This sequence ensures proper cascade behavior since all pseudo-classes share equal specificity. Place :focus after :hover or combine it with :hover for keyboard and mouse support.
How do I remove the underline from links in CSS?
Set text-decoration: none on your anchor selector. Add it back on hover if needed for visual feedback. Keep underlines on body text links for accessible typography compliance since color alone shouldn't indicate clickability.
Why is my hover style not working on links?
Check your selector order. If :visited or :link appears after :hover in your stylesheet, it overrides the hover state. Follow LVHA order. Also verify no specificity conflicts from other rules targeting the same anchor elements.
How do I style visited links differently from unvisited links?
Use the :visited pseudo-class selector. Browser security restrictions limit which properties work. You can only change color, background-color, border-color, and outline-color. Properties like font-size or background-image are blocked to prevent history sniffing.
What CSS properties work on the visited pseudo-class?
Modern browsers restrict :visited to color properties only: color, background-color, border-color, column-rule-color, outline-color, and fill/stroke for SVG in HTML. This security measure prevents websites from detecting your browsing history through styling differences.
How do I make CSS link styles accessible?
Maintain 4.5:1 contrast ratio between link color and background. Never remove focus outlines without replacement. Use underlines or other non-color indicators. Test with keyboard navigation and screen readers. Follow WCAG Success Criterion 1.4.1 and 2.4.7.
How do I add smooth transitions to link hover effects?
Apply the transition property to your base anchor rule: transition: color 0.2s ease. List each property you want animated. Keep durations under 300ms for responsive feel. The CSS animation approach works for more complex effects.
Can I style links differently in navigation versus body text?
Yes. Use descendant selectors to target context: nav a for menu links, article p a for paragraph links, footer a for footer sections. Each context can have unique colors, underlines, and hover behaviors without adding extra classes.
How do I create an animated underline effect on hover?
Use a pseudo-element with width transition. Set ::after with width: 0 by default, then width: 100% on hover. Position it absolutely at the bottom. This creates CSS link hover effects that grow smoothly on mouse interaction.
What is the difference between focus and focus-visible?
The :focus pseudo-class triggers for all focus events including mouse clicks. The :focus-visible selector only activates for keyboard navigation, hiding focus rings during mouse use. Use both for complete coverage across input methods and browsers.
Conclusion
These CSS link styles examples give you production-ready code for anchor elements across every state and context.
The LVHA selector order prevents cascade conflicts. Proper focus indicators satisfy keyboard navigation requirements. Custom underlines and background highlights create polished hover effects without breaking accessibility.
Start with the basics: set your :link and :visited colors, add a :hover transition, and never remove :focus outlines without a replacement.
Then expand. Build card designs with clickable overlays. Style call-to-action buttons that stand out. Create text animations that respond to user interaction.
Test everything in Chrome DevTools, Firefox, and Safari. Check contrast ratios. Tab through your page.
Links are everywhere. Make them work.
