text-decoration:none; doesn't work for a simple example
I'm courious why "Should not be underlined" words are still underlined in the code below:
<html>
<head>
<style type="text/css">
.badge1-link { text-decoration: none; }
.badge1 { text-decoration: underline; }
.badge2-link {text-decoration: underline;}
.badge2 {text-decoration: none;}
</style>
</head>
<body>
<a href="#" class="badge1-link"><span class="badge1">Underlined</span> | not underlined</a>
<br/>
<a href="#" class="badge2-link"><span class="badge2"> Should not be underlined</span> | Underlined</a>
</body>
</html>
Answer
Once an anchor tag has been given underlining it cannot be partially removed, in the way you are suggesting for badge2
See this link: Remove stubborn underline from link. The accepted answer has some comments which state the same.
The solution to your problem is to remove the underlining from the anchor tag, and then add partial underlining as you did with badge1