JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="5">first item <span>x</span></li>
    <li id="3">second item <span>x</span></li>
    <li id="6">third item <span>x</span></li>
    <li id="2">and so on... <span>x</span></li>
</ul>

CSS

span {
    padding: 3px;
    background-color: #333;
    color: #efefef;
    display: none;
}

ul li {margin: 10px}
ul li:hover {background-color: #f33}
ul li:hover span { display: inline; }
/*ul li span {display: none}*/