JSFiddle - React, Tailwind, and code Playground

HTML

This is some text: <a href="https://www.example.com"><span class="tag">[this is a tag] </span>This is a link, the tag being part of the link</a>

CSS

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: underline;
}

.tag {
  font-style: italic;
  color: yellow;
}

a:hover .tag {
  text-decoration: none !important; /* doesn't work */
}