I am trying to underline the link except for the #myspan element, which I do not want underlined under any circumstance. I'd like to also change #myspan's color. The rules don't seem to apply to it. If I reverse the order and not underline the "a" but underline #myspan it seems to apply the rules. I've seen Text decoration for link and span inside this link to no avail.
a {
text-decoration: underline;
}
a #myspan {
color: black;
text-decoration: none;
}
a:active #myspan {
color: grey;
text-decoration: none;
}
a:visited #myspan {
color: yellow;
text-decoration: none;
}
a:hover #myspan {
color: red;
text-decoration: none;
}
<a href="#">A link <span id="myspan">some additional information</span></a>
Make the element to be inline-block
and it won't get affected by the underline:
a {
text-decoration: underline;
}
a #myspan {
color: black;
display:inline-block;
}
a:active #myspan {
color: grey;
}
a:visited #myspan {
color: yellow;
}
a:hover #myspan {
color: red;
}
<a href="#">A link <span id="myspan">some additional information</span></a>
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. ref
To remove the small space between text and span you can get rid of the whitespace and use a small margin:
a {
text-decoration: underline;
}
a #myspan {
color: black;
display:inline-block;
margin-left:4px;
}
a:active #myspan {
color: grey;
}
a:visited #myspan {
color: yellow;
}
a:hover #myspan {
color: red;
}
<a href="#">A link<span id="myspan">some additional information</span></a>
a {
text-decoration: none;
}
#span1{
text-decoration:underline;
}
#myspan {
color: black;
text-decoration: none!important;
}
a:active #myspan {
color: grey;
text-decoration: none;
}
a:visited #myspan {
color: yellow;
text-decoration: none;
}
a:hover #myspan {
color: red;
text-decoration: none;
}
Make the above changes to the css.
<a href="#"><span id="span1">A link </span><span id="myspan">some additional information</span></a>
Make the changes to HTML.
Let me know if it works
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With