JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="liDoc">
    <a href="">My link</a> 
    <i class="fa fa-trash delDoc">icon</i>
   </li>
</ul>

CSS

.delDoc {
      color: transparent;
      font-size: 12px;
      cursor: pointer;
    }
    
    .liDoc:hover .delDoc {
      color: silver;
    }
    
    .liDoc:hover .delDoc:hover {
      color: red;
    }