text-decoration:none; doesn't work for a simple example

20.5k Views Asked by Haradzieniec At 05 April 2025 at 06:08

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>

Original Q&A

There are 5 best solutions below

Clayton On 16 August 2012 at 12:29 BEST 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

keaukraine On 16 August 2012 at 12:20

Please use :link pseudo-class.

Dirk McQuickly On 16 August 2012 at 12:25

The anchor is decorating the span. Text-decoration can also be 'overline', so then it's possible to overline an underlined text. So in this case, the css is acting like expected: the anchor is not underlining the underlined span.

Lasith On 30 January 2017 at 10:49

display:inline-block will do the trick. its worked for me. change your style as below

.badge2 {display:inline-block;text-decoration: none;}

Fire Lightning Bolt On 31 March 2021 at 05:21

I've been having a similar issue: a link had a blue underline and {text-decoration: underline;} did nothing. I tried {text-decoration: underline;} and while this did get rid of the blue line, it replaced it with a black line. With my 200 IQ, I decided to color the underline white: {text-decoration: underline white;} and this solved the issue, haha.

text-decoration:none; doesn't work for a simple example

There are 5 best solutions below

Related Questions in CSS

Related Questions in HTML

Related Questions in TEXT-DECORATIONS

Trending Questions

Popular # Hahtags

Popular Questions