Remove blue underline from link

How to Remove the Blue Underline from Hyperlinks with CSS

Learn various CSS techniques to effectively remove the default blue underline from hyperlinks, improving your website's aesthetic and design consistency.

Hyperlinks, by default, are often displayed in blue with an underline. While this provides a clear visual cue for users, it might not always align with a website's design aesthetic. This article will guide you through different CSS methods to remove or customize this default styling, giving you full control over your link's appearance.

Understanding Default Hyperlink Styling

Browsers apply default styles to HTML elements, including <a> (anchor) tags. This default styling typically includes a blue color and an underline to signify interactivity. While helpful for accessibility, modern web design often requires a more integrated approach to link styling. Overriding these defaults is a common task for front-end developers.

flowchart TD
    A[Browser Default Styling] --> B{Is it an <a> tag?}
    B -->|Yes| C[Apply Blue Color]
    C --> D[Apply Underline]
    B -->|No| E[Apply Other Defaults]
    D --> F[Render Link]
    E --> F

Default browser styling process for hyperlinks

Method 1: Using text-decoration: none;

The most straightforward and widely used method to remove the underline from a hyperlink is by setting the text-decoration CSS property to none. This property controls the decorative lines on text, such as underlines, overlines, and line-throughs.

a {
  text-decoration: none;
}

Applying text-decoration: none; to all <a> tags.

This CSS rule targets all <a> elements on your page and removes their underlines. You can also apply this to specific classes or IDs if you only want to affect certain links.

.no-underline {
  text-decoration: none;
}

/* In your HTML */
<a href="#" class="no-underline">Link without underline</a>

Applying text-decoration: none; to a specific class.

Method 2: Styling Link States (:hover, :active, :visited)

Links have different states: :link (unvisited), :visited (visited), :hover (mouse over), and :active (clicked). You might want to remove the underline for some states but keep it for others, or even add it back on hover to provide a visual cue.

a {
  color: #007bff; /* Default link color */
  text-decoration: none; /* Remove underline by default */
}

a:hover {
  color: #0056b3; /* Darker color on hover */
  text-decoration: underline; /* Add underline back on hover */
}

a:visited {
  color: #6610f2; /* Visited link color */
  text-decoration: none;
}

a:active {
  color: #004085; /* Active link color */
  text-decoration: none;
}

Controlling text-decoration for different link states.

This approach offers fine-grained control, allowing you to enhance user experience by providing visual feedback without relying on the default underline for all states.

Method 3: Using border-bottom for Custom Underlines

Instead of text-decoration, you can simulate an underline using the border-bottom property. This gives you more control over the line's style, thickness, and color, allowing for more creative designs.

a {
  color: #007bff;
  text-decoration: none; /* Remove default underline */
  border-bottom: 1px solid transparent; /* Create a transparent border */
  transition: border-color 0.3s ease; /* Smooth transition for hover effect */
}

a:hover {
  border-bottom: 1px solid #007bff; /* Show border on hover */
}

Creating a custom underline with border-bottom that appears on hover.

This method is particularly useful for creating subtle hover effects or custom-styled underlines that match your brand's aesthetic more closely than the browser's default.