Styling links

Best practices for styling links are intended to ensure that links are easily distinguishable from other text on the page. This can be through the design of the link itself, or through the design and structure of the section containing the link, when the links are in a block of navigational content.

When creating styling for links, the following is best practice for usability and accessibility:

  • Underlining links in blocks of text increases the usability of your website. On the web this is a universal convention that underlined text is a link.
  • Grouped links in sidebars, footers, or in navigation menus frequently don’t need to be underlined. If it is obvious in context that text is a link, underlining is not required.
  • Use underlining of text only for links. Underlining makes people think your text is clickable; if they click it and nothing happens, they may be confused or frustrated.

Joe Dolson wrote Why WordPress Themes Require Underlines on Links with the reasons why underlining is the best way to indicate links in the content.

For styling hover and focus states of links, read Styling focus and hover states of interactive HTML elements.

When you create your underlining styles with CSS, make sure the underline has a color contrast ratio of at least 3:1 against its background color.

Don’t: remove the underlining from links to only use color. Color-blind visitors (about 8% of the population) may miss the link.
I love cats, so I watch cat videos on YouTube.

Do: underline links in the content, everyone gets that it’s a link.
I love cats, so I watch cat videos on YouTube.

Resources

Other resources

  • First published: October 10, 2025
  • Last updated: August 04, 2026
  • Edit article: Improve it on GitHub
  • Contributors: Joe Dolson, Rian Rietveld.