CSS: How to Remove Underline from a:before – Clean Pseudo-Element Styling

The a:before pseudo-element is often used to add icons, symbols, or custom visuals before a hyperlink. But when you use it with a <a> (anchor) tag, you might notice that the underline from the link extends to the ::before content.

This happens because the underline is part of the anchor’s text decoration, and it applies to all inline content inside the anchor—including ::before.

In this tutorial, you’ll learn how to remove the underline from a:before using CSS while keeping the underline for the link text (if desired).

Table of Contents

✅ The Problem: Underline Spills Over

📌 HTML:

<a href="#" class="link-icon">Learn More</a>

📌 CSS:

.link-icon::before {
  content: "🔗 ";
}

This adds an icon, but the underline (from the <a>) might also appear under the icon—especially in certain browsers.

✅ Solution: Use `text-decoration: none` on `::before`

You can fix this by explicitly removing text-decoration on the ::before pseudo-element:

.link-icon::before {
  content: "🔗 ";
  text-decoration: none;
}

This ensures the pseudo-element does not inherit the underline from the anchor.

✅ Optional: Keep Underline Only on Text

If you want the underline only on the link text, not the icon or prefix:

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

.link-icon::before {
  content: "🔗 ";
  text-decoration: none;
}

.link-icon span {
  text-decoration: underline;
}

📌 Updated HTML:

<a href="#" class="link-icon"><span>Learn More</span></a>

This structure keeps the icon clean and applies underline only to the visible link text.

🧾 Summary

Goal	CSS Solution
Remove underline from `a:before`	`.link::before { text-decoration: none; }`
Keep underline only on part of link	Wrap text in `<span>` and style it
Remove underline globally	`a { text-decoration: none; }`

🧠 Conclusion

When using ::before on anchor tags, the link’s underline may affect your pseudo-content. A quick text-decoration: none; on the pseudo-element cleans up your design and keeps your UI polished. For more control, combine span wrapping with selective styling.

Pro Tip: If you’re using icons with links (like in menus), consider using SVG or web fonts for better styling flexibility and alignment.