HubSpot Guide: Remove Link Underlines with CSS

If you manage website styling in Hubspot, you can use simple CSS rules to remove the default underline from links while keeping your site readable, accessible, and on-brand.

This guide walks through several CSS techniques for customizing link underlines, based closely on the official tutorial at HubSpot’s blog on removing link underlines with CSS. You can use these approaches inside HubSpot themes, templates, or any external site.

How Link Underlines Work in HubSpot and CSS

Browsers add underlines to anchor tags by default. Whether you are styling links in a HubSpot theme or a standalone HTML page, these underlines come from the browser’s default stylesheet.

CSS overrides this behavior by targeting the <a> element and changing the text-decoration property. Understanding this core property is the first step before applying it across your HubSpot pages.

Core CSS Method for Removing Underlines in HubSpot

The simplest technique used in the HubSpot tutorial is to remove underlines globally with a single rule.

Basic CSS rule for all links in HubSpot

a {
  text-decoration: none;
}

This rule:

• Targets every anchor tag on the page.
• Removes the underline from normal links, visited links, and active links.
• Applies consistently whether the code is embedded on a HubSpot page, template, or external site.

In a HubSpot design manager, you can place this rule inside your main stylesheet so it affects your entire theme.

Styling Link States in HubSpot with CSS

Removing all underlines can reduce clarity for users. The HubSpot tutorial shows how to use pseudo-classes so links still feel interactive and easy to recognize.

HubSpot link styles with hover and focus

a {
  text-decoration: none;
  color: #1a73e8;
}

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

This pattern is useful for HubSpot pages because:

• Normal state has no underline, which can match a clean design system.
• Hover and focus states restore the underline to signal interactivity.
• Keyboard users see a clear focus indicator, supporting accessibility.

Apply this in your HubSpot theme’s CSS file or via a custom module that outputs a stylesheet.

Targeting Specific Links in HubSpot Templates

You might not want to remove underlines from every link. The HubSpot article shows how to limit styles to specific classes or areas of your layout.

Remove underlines only from navigation links in HubSpot

.main-nav a {
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus {
  text-decoration: underline;
}

Use this pattern when:

• You have a HubSpot menu module with the class .main-nav.
• You want navigation links to look like buttons or clean text.
• You still need an underline on hover for clear feedback.

HubSpot body content links vs. footer links

You can also style body content differently from the footer:

.body-content a {
  text-decoration: underline;
}

.site-footer a {
  text-decoration: none;
}

In a HubSpot layout, you can assign .body-content and .site-footer classes to specific sections to keep link styles consistent within each area.

Advanced Underline Styling for HubSpot Pages

The HubSpot tutorial also covers more advanced approaches, such as using border-bottom instead of text-decoration. This gives you more control over color, thickness, and animation.

Replace underlines with border-bottom in HubSpot

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

a:hover,
a:focus {
  border-bottom-color: transparent;
}

This method allows you to:

• Match the underline color to the text color using currentColor.
• Animate the border for subtle effects.
• Refine the thickness and positioning more than with the default underline.

In HubSpot, you can attach this CSS to a specific module or theme, so it does not override all site links unless you intend it to.

Animated link underlines for HubSpot buttons

.animated-link {
  text-decoration: none;
  position: relative;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.animated-link:hover::after,
.animated-link:focus::after {
  width: 100%;
}

Assign the .animated-link class to any CTA or text link within your HubSpot content editor to create a modern, animated underline when users interact with the link.

Accessibility Considerations for HubSpot Link Styles

HubSpot emphasizes accessibility in its design guidance, and removing underlines affects usability if not handled carefully.

Follow these best practices when styling links on HubSpot pages:

• Maintain sufficient color contrast between link text and body text.
• Use underlines, bold text, or another clear visual cue in addition to color.
• Keep a strong hover and focus style so keyboard and screen reader users can navigate comfortably.
• Avoid removing underlines inside long-form content where links must stand out clearly.

When updating HubSpot templates, test your changes with both mouse and keyboard navigation and check contrast ratios.

Step-by-Step: Apply CSS in HubSpot

To bring these styles into a HubSpot project, follow a simple process that mirrors the guidance in the original article.

1. Choose your HubSpot styling approach

Decide where you will place the CSS:

• Global theme stylesheet in the design manager.
• Page-level stylesheet in a coded template.
• Embedded CSS in a custom module or header HTML.

2. Add your link rules

Insert one of the following patterns:

• Global removal of underlines with hover underlines.
• Class-based styles for navigation, footer, or buttons.
• Advanced border-bottom or animated underlines for specific elements.

3. Test on key HubSpot pages

Review:

• Blog posts and landing pages.
• Navigation menus and CTAs.
• Footer links and legal pages.

Confirm that users can easily distinguish links from regular text.

4. Iterate for design and SEO

Consistent link styling helps both user experience and on-page SEO. On HubSpot pages, a clear link style can increase click-through to important internal resources like product pages, contact forms, and educational content.

Further Resources Beyond HubSpot

For more optimization ideas that build on what you learn in the HubSpot article, you can explore additional web and SEO resources. A good starting point is the consulting site Consultevo, which covers broader strategies for technical optimization and scalable site improvements.

Combining HubSpot’s documentation with external best practices will help you maintain consistent, accessible link styling across all your digital properties.

Summary: HubSpot-Friendly CSS for Link Underlines

Using simple CSS rules, you can remove or redesign link underlines in any HubSpot theme or template while preserving accessibility and clarity. Start with text-decoration, refine hover and focus states, then experiment with advanced styles like border-bottom and animations to create a modern, branded experience.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`