Question

I have a simple Css rule like so:

strong a:hover {
text-decoration: none;
}

This works for the following HTML:

<strong>
<a href="www.stackoverflow.com">Go to website</a>
</strong>

The problem is the Wysiwyg within the CMS i am using often puts the code in like so:

<a href="www.stackoverflow.com"><strong>Go to website</strong></a>

My css rule then doesnt work. Is there are pure Css solution?

Thanks
Al

Answer 1

This should work:

.hrefspan a:hover, strong {
text-decoration: none;}

<span class="hrefspan"><a>...</a></span>

By putting it in a span and applying the css only to the content of that span it will not affect other href’s or strong’s.