Prevent text shadow from being on top text decoration

I want to have a text shadow and text decoration without the shadow being on top of the decoration.

HTML:

<a href="" id="link">here</a>

CSS:

#link {
  color: white;
  text-decoration: underline;
}

#link:hover {
  color: white;
  text-decoration: none;
}

main h1, h2, h3, h4, h5, h6 {
  text-shadow: black 3px 3px;
}

>Solution :

Not sure I understand your question exactly. But I think you want to have shadow on your text and for the shadow not to be applied to the text-decoration underline.

What you could do, instead of using text-decoration, use border-bottom.

Then remove the border-bottom on hover

#link {
  color: white;
  border-bottom: 1px solid white;
  text-decoration: none;
}
    
#link:hover {
  color: white;
  border: 0;
}