JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li id="line1"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line2"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line3"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line4"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line5"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

CSS

#line1 span.a, 
#line2 span.a,
#line3 span.a
#line4 span.a
#line5 span.a{
    display:inline;
}

#line1:hover span.a,
#line2:hover span.a,
#line3:hover span.a,
#line4:hover span.a,
#line5:hover span.a {
    display:none;
}

#line1 span.b,
#line2 span.b, 
#line3 span.b, 
#line4 span.b, 
#line5 span.b {
    display:none;
}
#line1:hover span.b,
#line2:hover span.b,
#line3:hover span.b,
#line4:hover span.b,
#line5:hover span.b {
    display:inline;
}