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

StackOverflow https://stackoverflow.com/questions/11986948

  •  26-06-2021
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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

OTHER TIPS

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

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

Please use :link pseudo-class.

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top