<span> inside <a> link issue

Question

I have a link for headline, like the following,

<a href="#">Cat<span class="more">See More</span></a>

You see I have inside in order to flow "See More" to the right, so I have the following css

.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}

I expect that when I hover over the text "Cat", the "See More" is underlined, but it does not work in IE/Firefox, it works in Chrome though.

http://jsfiddle.net/ZW9tt/1/

Anyone know why?

Answer 1

Anyone know why?

What you're seeing in IE and Firefox is actually expected behavior, described in the CSS2.1 spec:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

But wait, there's more:

Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to preserving a constant thickness and line position as described above. This was arguably allowed by the looser wording in CSS2. SVG1, CSS1-only, and CSS2-only user agents may implement the older model and still claim conformance to this part of CSS 2.1. (This does not apply to UAs developed after this specification was released.)

Given that Chrome is a CSS2.1 browser, believe it or not, it's actually exhibiting a bug (which happens to have just been patched!). Here's the bug report.

If you need to apply the underline to the floated span, you'll need to apply it explicitly to a:hover .more as well:

a:hover, a:hover .more { text-decoration: underline; }

Answer 2

Use:

 a:hover, a:hover .more {text-decoration:underline;}