A Web Designer‘s Guide to Removing Underlines from Links Using CSS

Do the underlines on your links seem to ruin your otherwise perfect website design? You‘re not alone. In modern web design, it‘s increasingly common to see links without the traditional underline. In fact, a study of over 50 highly trafficked websites found that only 40% still use underlines on their links.

While ubiquitous in the early days of the web, many designers now opt to differentiate links in other ways – through color, bold text, or even subtle animations. If you‘re looking to clean up your site‘s look by removing link underlines as well, you‘ve come to the right place. In this guide, we‘ll walk through exactly how to do that using CSS, while still keeping your site accessible and user-friendly.

Understanding Link Styles

Before we dive into the code, let‘s first understand how browsers style links by default and what our options are for changing that default look.

In unstyled HTML, links are always underlined. This default styling comes from the early days of the web, when underlines were a necessary visual cue to differentiate clickable hyperlinks from regular text in otherwise very simple designs.

However, as web design has evolved and pages have become more visually complex, designers now have many more tools at their disposal for indicating what text is clickable. Color, placement, and contextual cues can all help users identify links without the need for underlines.

Link States

It‘s also important to understand that links can exist in different states based on user interaction:

  • :link – an unvisited link
  • :visited – a link the user has visited before
  • :hover – a link the user is hovering over with their mouse
  • :active – a link that‘s actively being clicked on

Each of these states can be styled independently with CSS. So when we talk about removing the underline, we need to consider what should happen in each of these states.

Removing Underlines with CSS

So, how do we actually get rid of those pesky underlines? With the CSS text-decoration property.

Here‘s the CSS code you need:

a {
  text-decoration: none;
}

This rule targets all <a> elements (which is how links are created in HTML) and sets their text-decoration to none, effectively removing the underline.

To be more comprehensive and ensure the underline is removed in all states, you should write a rule for each link state like so:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;  
}

a:active {
  text-decoration: none;
}

With this CSS in place, your links will never have underlines, regardless of their state.

Importance of Rule Order

You might be wondering why we need separate rules for each state instead of just the single a { text-decoration: none; } rule. The reason has to do with the cascading nature of CSS.

CSS stands for Cascading Style Sheets, and the "cascading" part refers to the way rules are applied when multiple rules target the same element. In general, more specific rules will override less specific ones, and rules that come later in the stylesheet will override earlier ones if they have the same specificity.

In the case of link states, the :link and :visited states are considered equally specific, so their order doesn‘t matter. But :hover and :active are considered more specific. If we put the general a rule last, it would override the more specific state rules.

So, to ensure our text-decoration: none rule applies in all cases, we write the rules in this specific order:

  1. :link
  2. :visited
  3. :hover
  4. :active

This way, each rule gets applied as intended.

Accessibility Considerations

While removing link underlines can certainly clean up a design, it‘s not a decision to make lightly. Underlines serve an important accessibility function, helping users – particularly those with visual impairments, motor difficulties, or cognitive disabilities – identify and follow links.

The Web Content Accessibility Guidelines (WCAG), which set the international standards for accessible web content, have specific requirements around link styling:

  • 1.4.1 Use of Color: Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

  • 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context. (Level A)

What this means in practice is that if you remove underlines from links, you need to ensure that there are other visual indicators (besides just color) that the text is a link. This could be achieved through bold text, a different font, an icon, or a border.

Here‘s an example that uses a bottom border instead of an underline:

a {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

With this styling, the link will have a solid bottom border that is 2 pixels thick and matches the current text color. This maintains a visual distinction for the link without relying solely on color.

As web accessibility consultant Adrian Roselli puts it: "We‘ve been trained to recognize blue underlined text as links, so when you remove the underline, you need to consider how else you‘ll communicate that the text is a link. Color alone is not sufficient."

Advanced Link Styling Techniques

Removing the underline is just the start of what you can do with link styling in CSS. Here are a few more advanced techniques to consider:

Using Background Images

For a more subtle link indicator, you could use a background image instead of an underline or border. This allows you to use more creative visual elements, like gradients or patterns.

a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s;
}

a:hover, a:focus {
  background-size: 100% 2px;
}

In this example, the link has a linear gradient background that matches the text color. Initially, this background is 0% wide, so it‘s not visible. On hover (or focus for keyboard navigation), the background expands to 100% wide, creating an animated underline effect.

Styling Based on Link Type

You can also style links differently based on where they lead. For example, you might want external links (those leading to other websites) to have a different visual treatment than internal links.

You can target external links using an attribute selector:

a[href^="http"]:not([href*="yourdomain.com"]) {
  /* Styles for external links */
}

This selector targets <a> elements whose href attribute starts with "http" (indicating an absolute URL) but doesn‘t contain "yourdomain.com" (replacing "yourdomain.com" with your actual domain).

You could use this to add an external link icon:

a[href^="http"]:not([href*="yourdomain.com"]):after {
  content: "↗️";
}

This adds a ↗️ icon after external links, providing a visual cue that the link will take the user away from your site.

Link Styling in CSS Frameworks

If you‘re using a CSS framework like Bootstrap, Foundation, or Materialize in your project, it‘s important to know how they handle link styling by default.

Bootstrap

In Bootstrap 4 and 5, links are underlined only on hover and focus by default. To remove the underline completely, you can add the following to your custom CSS:

a:hover, a:focus {
  text-decoration: none;
}

Foundation

In Foundation 6, links are not underlined by default. However, Foundation does set a default link color (blue) which you may want to override in your custom styles.

Materialize

Materialize 1.0 styles links without underlines by default. It uses a different color for links (light blue) to differentiate them from regular text.

Remember, if you‘re overriding framework styles, you‘ll want to make sure your custom styles come after the framework styles in your stylesheet order.

Origins of the Link Underline

Have you ever wondered why links are underlined by default in the first place? The story goes back to the very early days of the web.

In 1993, the world‘s first graphical web browser, NCSA Mosaic, was released. One of the programmers working on Mosaic, Marc Andreessen, made the decision to style hyperlinks in blue with an underline in order to distinguish them from regular text.

According to Andreessen, "I defined simple default styles: blue for links (because blue was the darkest color on most monitors at the time, and therefore stood out), purple for visited links, and underlines to distinguish links within text."

This standard was then adopted by other early browsers, like Netscape Navigator and Internet Explorer, and became a defining feature of the early web. While link styles have evolved since then, the underline remains a recognizable indicator of a hyperlink for many users.

Frequently Asked Questions

Is it bad to remove link underlines?

Removing link underlines is not inherently bad, but it does require some careful consideration. As long as you maintain adequate visual differentiation for links through other means (color, bold text, icons, etc.), removing underlines can be an acceptable design choice.

Will removing link underlines hurt my SEO?

No, removing link underlines will not directly affect your site‘s SEO. Search engines are primarily concerned with the content and structure of your HTML, not the visual styling. As long as your links are properly set up in your HTML (using <a> tags with appropriate href attributes), search engines will be able to follow and index them regardless of their styling.

Can I style links differently in different parts of my page?

Absolutely! You can use CSS classes or contextual selectors to style links differently in different contexts. For example, you might have one style for links in your main content area and a different style for links in your navigation menu.

Here‘s an example:

/* General link styles */
a {
  text-decoration: none;
  color: blue;
}

/* Links in the navigation menu */
nav a {
  color: white;
  background-color: blue;
  padding: 5px;
}

How can I make my links accessible to keyboard users?

To ensure your links are accessible to keyboard users, they should have a visible focus state. This is usually an outline that appears when the link is tabbed to using the keyboard.

By default, browsers provide a focus outline, but it‘s common for developers to remove this with the CSS rule outline: none;. If you do this, it‘s important to provide an alternative focus style, like a background color change or an underline.

Here‘s an example:

a:focus {
  outline: none;
  text-decoration: underline;
}

This removes the default focus outline and instead provides an underline when the link is focused.

Conclusion

Removing underlines from links using CSS is a straightforward way to modernize and clean up your site‘s design. With the text-decoration property and an understanding of link states, you can precisely control the appearance of your links.

However, it‘s crucial to remember the accessibility implications of removing link underlines. Always ensure that your links are still clearly distinguishable from regular text through other visual means, such as color, bold text, or alternative indicators like borders or backgrounds.

By following the tips and best practices outlined in this guide, you can achieve a sleek, modern look for your links without sacrificing usability or accessibility. Happy styling!

Similar Posts