The HTML structure I am working with is as follows:
<p>
<a href="#">
<span class = "class-for-span"> SOME TEXT HERE </span>
</a>
</p>
Along with the following CSS:
p a{
color: grey;
text-decoration: underline;
}
.class-for-span {
color: red;
text-decorations: none;
}
.class-for-span:hover {
text-decoration:underline;
}
I am aiming to achieve the following effect:
Every link within a paragraph should appear as a grey underlined link. If there is a span element inside the anchor tag, it should be red with no decoration, and turn red and underlined when hovered over.
As of now, the links display as grey and underlined. If a span is present within an anchor tag, it appears as a red link with a grey underline, and turns red with a red underline upon hovering.
Is it possible to resolve this issue using only CSS? I have attempted the following solution without success:
p a span .class-for-span {
text-decoration: none;
}
However, this approach has not produced the desired outcome...