JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="one">
   <li data-text="one"><a href="#">one</a></li>
   <li data-text="two"><a href="#">two</a></li>
   <li data-text="three"><a href="#">three</a></li>
</ul>

<ul class="two">
    <li><a href="#">
        <span class="a">one</span>
        <span class="b">one</span>
    </a></li>
    <li><a href="#">
        <span class="a">two</span>
        <span class="b">two</span>
    </a></li>
    <li><a href="#">
        <span class="a">three</span>
        <span class="b">three</span>
    </a></li>
</ul>

CSS

.one {
  margin: 0; padding: 0;
  list-style: none;
  overflow: hidden;
}
.one li {
  float: left;
}
.one li:hover a {
  visibility: hidden;
}
.one li:hover:before {
  position: absolute;
  font-weight: bold;
  content: attr(data-text);
}

.two {
    margin: 0; padding: 0;
    list-style: none;
}
.two li {
    float: left;
}
.two li a span.b {
    visibility: hidden;
    font-weight: bold;
}
.two li a span.a {
    position: absolute;
}
.two li:hover a span.b {
    visibility: visible;
}
.two li:hover a span.a {
    visibility: hidden;
}