JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"><span data-icon="✪"></span><span class="text">A Link</span></a>

CSS

body{  margin: 2em auto; width: 200px; }

[data-icon]:before{
  content: attr(data-icon);
  font-size: 2em;
  vertical-align: middle;
  padding-right: .5em;
}
a {
  text-decoration: none;
  padding: .5em;
  border: 1px solid black;
}
a:hover{  text-decoration: none; }
a:hover [data-icon]:before{
    
  /*Works*/
  color: red;
}
a:hover .text {
    text-decoration: underline;
}