悬停时淡入淡出下划线？

Question

当我将鼠标悬停在链接上时，如何淡入淡出下划线？

我不能使用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>

Answer 1

您可以使用该text-decoration属性并转换颜色'

文字装饰颜色@ MDN

a {
  text-decoration: underline solid transparent;
  transition: text-decoration 1s ease;
  display: block;
  width: 100px;
  border: 1px solid green;
  margin: 1em auto;
  border-radius: 1em;
  padding: 1em;
}

a:hover {
  text-decoration: underline solid Currentcolor;
}

<a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>