当我将鼠标悬停在链接上时，如何淡入淡出下划线？
我不能使用border-bottom属性，因为我的一些链接是选项卡，所以如果我使用border-bottom，div 会带有下划线而不是文本。我只需要带下划线的文本。
有没有办法使用 CSS 或 JS 来做到这一点？
这是我想在其中添加效果的 HTML：
<div class="tabcordion">
<ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
<li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
<li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
<li class="option3"><a data-target=".BESUCH">BESUCH</a></li>
<li class="option4"><a data-target=".MITGLIED">MITGLIED</a></li>
<li class="option5"><a data-target=".PROJEKTBERATUNG">PROJEKTBERATUNG</a></li>
</ul>
</div>