Cannot undo text-decoration for child-elements - html

Question

Say you have this html:
<a href="#">
This is underlined
<span>
This isn't.
</span>
</a>
And this css:
a:hover {
text-decoration: underline; /* I know, this is enabled by default. */
}
a:hover span {
text-decoration: none !important;
}
Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by using this:
<a href="#">
<span class="underlined">
This is underlined
</span>
<span>
This isn't.
</span>
</a>
plus this css:
a:hover {
text-decoration: none;
}
a:hover span.underlined {
text-decoration: underline;
}
But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element.
So, why...?
Edit: Inline-blocks
According to #amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!
a:hover span{
text-decoration:none;
display:inline-block;
}
As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...
a:hover span{
text-decoration:none;
display:block;
}
Little table:
CSS-Rule | Webkit | Firefox | Opera | IE
--------------------------------------------------------------------------------
display: block; | x | | ? | ?
display: inline-block; | | x | ? | ?

Answer 1

It has to do with the fact that span is an inline element. Try this:
a span{
text-decoration:none;
display:inline-block;
}
Online demo: http://jsfiddle.net/yffXp/
UPDATE
In FF (4?) only display:block works (which at the same time in webkit doesn't), causes line break.
UPDATE 2 (hack?)
a span{
display:inline-block;
background:#fff;
line-height:1.1em;
}
Overlaying the white background over the border is not pretty but it seems to do it. It works in every browser other than IE 6,7
Online demo: http://jsfiddle.net/yffXp/6/

Answer 2

There might be some incredibly zany cross-browser way to do it, but I'd just go with this (a variation of the solution in your question), for the sake of sanity:
It just works: http://jsfiddle.net/KrepM/1/
HTML:
<a href="#">
<span>This is underlined</span>
This isn't.
</a>
CSS:
a:hover {
text-decoration: none
}
a:hover span {
text-decoration: underline
}

Answer 3

As a solution, I'd use #thirtydot's one, but as far as the problem is concerned, I think you are looking at it the wrong way.
Check the following fiddle: As you can see the non-decorated part is not decorated with the colour given; what you are seeing is the colour of it´s parent that extends to the end of the element (as spaces in an a are underlined as well). So the browser is really doing what you are telling it to do, you just don´t see it.
As a reference, compare the previous fiddle with this one. And guess what happens when you change the colour of the span to the background colour...

Answer 4

Caught that problem when I used a class for my link.
×
If I used .close in my css chrome and safari kept underlining the link. When I added a tag before class name everything started working fine.
a {
text-decoration: none;
}
a.close {
color: black;
}

Answer 5

I came across this problem today, but for pseudo elements, which amounts to the same situation and I was able to find a solution. Set overflow:hidden; on the child element. Then set your height of the child element slightly smaller than the height for the rest of the link. You'll have to play with the height a few times to get it just right, but eventually you should be able to make the underline disappear.