Can this work in CSS?

Question

I want to have hover styles on a link, but not on a span which is a child of that link. I've never done it before, but I tried this

.properties #content table th a {
    color: #fff;
    text-decoration: none;
}

.properties #content table th a:hover {
    text-decoration: underline;
}

.properties #content table th a:hover span.sort-direction {
    text-decoration: none;
}

The hover underline works great, but it still underlines the span. I guess this is because an underline of the anchor element will stretch to fit the span, I think.

What would be a workaround? I want the span to be a link too. Maybe a combination of position: relative on the anchor and position: absolute on the span?

Answer 1

I put the anchor node in its own span, and then set the text-decoration: underline on it.

.properties #content table th a:hover span.header {
    text-decoration: underline;
}

Answer 2

Since you didn't provide any HTML, I made a simplified example:

CSS

.properties a {
 color: #fff;
 text-decoration: none;
}

.properties a:hover span.hovered {
 text-decoration: underline;
}

HTML

<div class="properties">
 <a href="#"><span class="hovered">Hello</span> Test</a>
</div>

Answer 3

This is an interesting quirk. Since the width of the a element includes the span, the underline goes across the whole a link. An underline value of none does not "blank out" that underline. You could get the effect you want this way (presuming your background is white):

.properties #content table th a:hover {
    border-bottom: 1px solid black;
}

.properties #content table th a:hover span.sort-direction {
    border-bottom: 1px solid white;
}

If you have a non-solid background this may not look ideal. You may be better off adding an additional span element.