On this page
Styling Links
Styling Links in CSS: The Complete Guide
Links are the backbone of the web. Every navigation menu, call-to-action, footer, breadcrumb and blog post depends on the <a> element. Good styling links in CSS makes a page easier to scan, easier to use with a keyboard, and more accessible. Bad link styling makes users guess what is clickable. In this lesson you will learn every link state, the correct order of pseudo-classes, modern underline properties, animated links, button-style links and accessibility rules. Every code example below is editable and runs live in your browser.
Focus keyword: styling links in CSS. Related keywords: CSS link states, a:hover, a:focus-visible, LVHA order, text-decoration, text-underline-offset, animated underline, button link CSS, accessible links, WCAG 2.2 focus appearance.
1. The Anchor Element Basics
The anchor tag <a href='...'> creates a hyperlink. By default, browsers show unvisited links in blue with an underline, visited links in purple, and active links in red. These defaults are functional but rarely match your brand, so designers override them with CSS.
An anchor without an href attribute is not a link. It is not focusable and does not match :link or :any-link. Always use a real href for navigation, and use a <button> for actions that do not navigate.
2. Link Pseudo-Classes (Link States)
| Pseudo-class | When it applies | Typical use |
|---|---|---|
:link | Unvisited link with an href | Base link colour |
:visited | Link the user has already visited | Slightly different colour |
:hover | Mouse pointer is over the link | Colour change, underline |
:focus | Link has keyboard or pointer focus | Visible outline |
:focus-visible | Focus that should be visibly shown (keyboard) | Focus ring without mouse clutter |
:active | Link is being pressed | Pressed feedback |
:any-link | Matches both :link and :visited | Shared base styles |
The LVHA Order (LoVe HAte)
Because these pseudo-classes have the same specificity, the order matters. Always write them as :link, :visited, :hover, :active (LVHA). If you put :hover before :visited, the visited colour will override the hover colour for visited links. Add :focus-visible next to :hover so keyboard users get the same feedback as mouse users.
Privacy Limits on :visited
For privacy reasons, browsers only allow a few properties on :visited: colour-related properties such as color, background-color, border-color, outline-color and text-decoration-color. You cannot change layout or add content to visited links, and JavaScript cannot read the computed visited colour.
3. Keyboard Focus and Accessibility
Never write a:focus { outline: none; } without a replacement. Keyboard users rely on the focus indicator to know where they are. Use :focus-visible to show the ring only when the browser decides it is helpful (keyboard navigation), and keep at least a 3:1 contrast ratio against the background. WCAG 2.2 also recommends a minimum target size of 24 by 24 CSS pixels for interactive elements, and a generous tap area on mobile.
- Links must be distinguishable from surrounding text by more than colour alone. Keep the underline or add another cue.
- Text contrast for link text should be at least 4.5:1 for normal text.
- Use descriptive link text. Avoid vague text such as click here or read more.
- Add a skip link at the top of the page so keyboard users can jump to the main content.
4. Modern Underline Control
The old way of faking an underline with border-bottom is no longer needed. Modern CSS gives you full control:
text-decoration-line: underline, overline, line-through.text-decoration-style: solid, double, dotted, dashed, wavy.text-decoration-color: a separate colour for the line.text-decoration-thickness: the line width (for example 2px or from-font).text-underline-offset: the gap between text and underline.text-decoration-skip-ink: skips descenders like g and y for cleaner reading.
5. Animated Link Effects
Animated underlines are one of the most popular trending link effects. The most robust technique uses a background-image gradient and animates background-size on hover and focus. It works across line breaks and does not shift layout. Always respect users who prefer reduced motion with the prefers-reduced-motion media query.
6. Button-Style Links
A call-to-action often looks like a button but should still be an <a> when it navigates to another URL. Use display: inline-block, padding, background, and border-radius, and remember to style the hover, focus-visible and active states.
7. Attribute Selectors for Smart Links
CSS attribute selectors let you style links automatically based on their href. For example, a[href^='http'] targets links starting with http (external links), a[href$='.pdf'] targets PDF downloads, and a[href^='mailto:'] targets email links. Combined with ::after you can add small icons or labels without editing HTML.
8. Dark Mode and Design Tokens
Use CSS custom properties for link colours and switch them in a prefers-color-scheme: dark media query. Set color-scheme: light dark on :root so the browser adapts form controls and default colours. Remember that a blue that passes contrast on white can fail on a dark background, so tune the lightness for dark mode.
9. Trending Link Techniques (2026)
- :focus-visible everywhere: now the standard replacement for raw :focus.
- text-underline-offset and text-decoration-thickness: the modern, clean underline style.
- :has() parent selectors: style a card or list item when it contains a hovered link, for example
li:has(a:hover). - :is() and :where(): shorten selector lists, for example
:is(nav, footer) a. - View Transitions: smooth page-to-page navigation for link clicks.
- Container and motion queries: respect prefers-reduced-motion for every hover animation.
10. Common Mistakes
- Removing the underline and relying on colour alone.
- Writing pseudo-classes in the wrong order (breaking LVHA).
- Removing the focus outline with no replacement.
- Using a link for an action, or a button for navigation.
- Styling :visited colours too similar to the base colour, or too faint to read.
- Tiny tap targets on mobile.
11. Best Practices Checklist
- Follow LVHA order and include :focus-visible.
- Keep a visible cue (underline) for links inside paragraphs.
- Use CSS variables so link colours are easy to theme.
- Provide clear hover, focus and active feedback.
- Respect reduced-motion and dark-mode preferences.
- Test with keyboard only (Tab, Shift+Tab, Enter).
Summary
Styling links in CSS is about more than colour. Use the link pseudo-classes in the right order, keep focus visible, control underlines with modern properties, add subtle animation, and always design with accessibility in mind. Try each live example below, edit the code, and watch the result update instantly.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Style the links so that: (1) unvisited links are green, (2) visited links are dark gray, (3) hover shows a thicker underline and a darker green, (4) keyboard focus shows an orange outline with 3px offset, and (5) pressed links turn red. Use the correct LVHA order and include :focus-visible.
Press Run to execute.
Show expected output
Links are green by default, dark gray when visited, have a thicker darker-green underline on hover, an orange focus ring with keyboard focus, and turn red while pressed.This is a self-check — compare your result with the expected output above.
Using only CSS attribute selectors and the ::after pseudo-element, add an arrow symbol after links that start with https and add the text (PDF) after links that end with .pdf. Do not change the HTML.
Press Run to execute.
Show expected output
The first link shows an arrow after its text, the second shows (PDF) after its text, and the third link has no extra symbol.This is a self-check — compare your result with the expected output above.
Was this page helpful?