How do I not underline an element in a link?

Question

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>
    

Answer 1

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>

Answer 2

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