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

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>

I know its minor but `_` is an invalid character in CSS. If you want ultimate compatibility you should either camel case or use `-` instead. — David Barker, Aug 16 '12 at 12:23
Even when you remove the `_` it still shows the same behavior. — Matthijs Bierman, Aug 16 '12 at 12:24
It won't make any difference to this script, the majority of browsers ignore the W3C recommendation and treat `_` as valid. (This is why I said it was minor ;) ) — David Barker, Aug 16 '12 at 12:25
@DavidBarker — What part of the recommendation says that `_` characters are invalid in selectors / class names / etc? — Quentin, Aug 16 '12 at 12:27
Clearly you've never run CSS with underscores through a W3C validator. This is so minor it really doesnt deserve any further comment... — David Barker, Aug 16 '12 at 12:28
@DavidBarker — I have. The most recent time was about 10 seconds after I read your claim that the CSS in the question was invalid. — Quentin, Aug 16 '12 at 12:33
Quentin, to be fair my knowledge on this is going back many years when IE5 was predominant. Back then underscores were actively discouraged by W3C and the likes of Eric Myers etc. Like I said, by todays standards it is so minor I'm starting to regret even writing it. :) — David Barker, Aug 16 '12 at 12:36
I've removed underscores. How about the answer for my question?:) — Haradzieniec, Aug 16 '12 at 12:36
possible duplicate of [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) — mercator, Aug 16 '12 at 12:58

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

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

edited May 23 '17 at 12:09

Community

1
1

answered Aug 16 '12 at 12:29

Clayton

457
2
8

score 5 · Answer 2 · answered Jan 30 '17 at 10:49

5

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

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

answered Jan 30 '17 at 10:49

Lasith

565
1
6
17

Slick and easy to implement. Adding display:inline-block to my class worked perfectly. – JMers Jan 23 '20 at 22:43

score 1 · Answer 3 · answered Aug 16 '12 at 12:20

1

Please use :link pseudo-class.

answered Aug 16 '12 at 12:20

keaukraine

5,315
29
54

Why? That won't make any difference. – Quentin Aug 16 '12 at 12:24
1

As I see it in Firebug, it underlines the whole `a.badge2_link` but `span.badge2` is not underlined. However, underline is still displayed for the whole text of `a.badge2_link`. `span.badge2` looks underlined inside underlined text of `a.badge2_link`. – keaukraine Aug 16 '12 at 12:35
It made a difference for me! – Gaizka Allende Oct 06 '14 at 16:16

Dirk McQuickly · Answer 4 · 2012-08-16T12:37:48.640

0

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.

edited Aug 16 '12 at 12:37

answered Aug 16 '12 at 12:25

Dirk McQuickly

2,099
1
17
19

The `text-decoration` property takes a list of values — http://jsfiddle.net/Fn857/ – so you don't need to nest elements to make that possible. – Quentin Aug 16 '12 at 12:37
That's what I said in my comment to answer below. Thank you for better explanation. – keaukraine Aug 16 '12 at 12:40

score 0 · Answer 5 · answered Mar 31 '21 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

5 Answers5