Could this work in CSS?

Question

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

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

Hover emphasis works fine, but it still emphasizes range. I think this is because the underline of the snap element will stretch to fit the range, I think.

What will be the workaround? I want span to be a link too. Maybe a combination of position: relativeanchor and position: absolutespan?

Answer 1

I put the node anchor in my own range and then set on it text-decoration: underline.

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

Answer 2

HTML, :

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 element aincludes span, the underline goes through the entire link a. The underlined value nonedoes not underline the underline. You can get the effect you want in this way (assuming 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 solid background, this may not look perfect. You might be better off adding an extra item span.