JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="popup-menu">
    
    <li><a id="id1" href="#"><span>File</span></a></li>
    <li><a id="id2" href="#"><span>Edit</span></a></li>
    <li><a id="id3" href="#"><span>View</span></a></li>
</ul>

CSS

li:hover
{
    background-color:silver;
}

#id1:before
{content:"File";} 
#id2:before
{content:"Edit";} 
#id3:before
{content:"View";} 


.popup-menu
{
    padding:4px;
    width : 150px;
    background-color: #DDD;
    border:1px solid #999;
    list-style-type: none;
 
    margin:0;
    box-shadow:1px 1px 5px #999;
    font-family:calibri;
}
 
li span
{
    color:red;
  display:none; 
}
a, a:visited
{

    color:black;
   display:block;
    padding:2px 4px;
    text-decoration: none;
}
a:hover
{
   
    background-color: gray;
    color:white;
}