JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

CSS

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

li:hover span.a{
 display: none;
}

li:hover span.b{
 display: inline;
}