html - 悬停时CSS border-bottom应该扩展

Question

我想制作一个边框动画。如果我将鼠标悬停在链接上，边框底部应该从左侧延伸到右侧。我搜索了很多，但我不知道如何命名它。

这是我的代码:

.a{
    width: 200px;
    display: inline-block;
    transition: 0.5s all;
}

.a:hover{
    border-bottom: 5px solid #037CA9;
}

<a>Benutzername:</a>

我必须如何设计这个元素，使边框底部从左侧延伸到右侧？

Answer 1

你可以使用定位的伪元素

a {
  text-decoration: none;
  position: relative;
}
a::before {
  content: '';
  position: absolute;
  background: red;
  height: 2px;
  top: 100%;
  left: 0;
  width: 0%;
  transition: width 0.5s ease;
}
a:hover::before {
  width: 100%;
}

<a href="#">Benutzername:</a>