How do I not underline an element in a link?

  • A+
Category:Languages

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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: