How to Remove Underline from Link in CSS

css remove link underline
Table of Contents

When styling a web page, details matter, including how links appear. By default, browsers add an underline to hyperlinks, but with CSS, you can customize the appearance of these links. In this article, we’ll explore how to use the text-decoration property to remove the underline from links and ensure a consistent and accessible design across your website.

By default, browsers underline links to indicate their clickability. This default styling applies to the anchor tag (), which is the HTML element used to create hyperlinks. The default styling can be controlled and modified using CSS properties.

The text-decoration CSS Property

The text-decoration property in CSS is used to set or remove decorations from text. It can be used to underline, overline, or line-through text. To remove the underline from links, we will use text-decoration: none;.

Basic Removal of Underlines

To remove underlines from all links on a web page, you can use the following CSS code:

a {
  text-decoration: none;
}

This simple rule targets all anchor tags (<a>) on the page and removes the underline.

Handling Pseudo-Classes

Links can exist in different states, known as pseudo-classes: a:link, a:visited, a:hover, and a:active. It’s essential to remove the underline from links in all these states to ensure consistency:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

Combining Pseudo-Classes

For a more concise approach, you can combine the pseudo-classes:

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

This method ensures that all link states are covered, removing the underline consistently across all interactions.

While removing the underline, you can also add other styles to links to maintain their visibility and accessibility. For instance, changing the link color on hover:

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  color: red;
}

Cross-Browser Compatibility

Ensure your CSS styles work across different browsers by testing your webpage in Chrome, Firefox, Safari, and Edge. This testing helps maintain a consistent user experience.

Accessibility Considerations

Color Contrast

Ensure sufficient color contrast between the link text and the background to maintain readability. The Web Content Accessibility Guidelines (WCAG) suggest a minimum contrast ratio of 4.5:1 for standard text and 3:1 for larger text.

Focus Styles

When users navigate your webpage using a keyboard, it’s crucial to have clear focus styles:

a:focus {
  outline: 2px solid #0078d4;
}

Semantic HTML

Use semantic HTML to ensure that assistive technologies can correctly interpret your content. For example, use the <a> tag for links and the <button> tag for interactive elements.

Utilizing Component Libraries

If you’re using a component library like CoreUI, you can simplify the process of removing underlines from links. CoreUI offers utilities for text decoration, making it easy to apply these styles directly to your HTML elements. For example:

<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

This class will remove the underline from the link without the need for additional CSS. For more details, you can check out the CoreUI Text Decoration Utilities.

Conclusion

Removing underlines from links in CSS is straightforward using the text-decoration property. By combining this property with pseudo-classes, you can ensure a consistent and accessible link styling across your web pages. Remember to test across different browsers and maintain accessibility best practices to create a user-friendly and inclusive website.

By following these steps, you can create visually appealing links that enhance the user experience on your website. Happy styling!

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
Passing props to child components in React function components
Passing props to child components in React function components

How to loop inside React JSX
How to loop inside React JSX

How to validate an email address in JavaScript
How to validate an email address in JavaScript

What is the difference between typeof and instanceof in JavaScript
What is the difference between typeof and instanceof in JavaScript

How to conditionally add attributes to React components
How to conditionally add attributes to React components

How to force a React component to re-render
How to force a React component to re-render