JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<ul>
   <li class="vbox" id="visbox"><span class="glyphicon glyph2 glyphicon-eye-open" ></span> <span class="text-lable">Vision</span></li>
   <li class="vbox" id="valbox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-lable">v2</span></li>
    <li class="vbox" id="foobox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-lable">v3</span></li>
   <li class="vbox" id="dribox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-lable">v4</span></li>
   <li class="vbox" id="engbox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-lable">v5</span></li>
</ul>

CSS

.vbox{
    list-style: none;
}
.vbox .text-lable {
    visibility: hidden;
}
.vbox:hover {
    cursor: pointer;
}
.vbox:hover .text-lable {
    visibility: visible;
}