JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="demo">
    <li><a href="#" title="Some">Some</a></li>
    <li><a href="#" title="Navigation">Navigation</a></li>
    <li><a href="#" title="Links">Links</a></li>
</ul>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 20px;
}  

.demo {
    margin: 20px;    
}

li {
    float: left;
    margin: .5em;
}

a {
    text-decoration: none;
    font-weight: bold;
    position: relative;
    visibility: hidden;
}

a:hover {
    font-weight: bold;
}

a:after {
    position: absolute;
    left: 0;
    visibility: visible;
    content: attr(title);
    font-weight: normal;
    color: #333;
}

a:hover:after {
    font-weight: bold;
}