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;
}