CSS 边框底部应在悬停时扩展

Question

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

这是我的代码：

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

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

<a>Benutzername:</a>

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

Answer 1

如果有人想从中心延长线，有解决方案：

a {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  background: #2a57b3;
  display: block;
  height: 2px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}
a:hover:after {
  width: 100%;
  margin-left: -50%;
}

<a>Hover me!</a>

Answer 2

我认为您正试图在下面得到类似这个小提琴的东西。 我用<a> 样式标记做了一个小例子，并使用了伪<a> 元素，并给它一个过渡以使其在悬停时扩展。

a {
    position:relative;
    display:inline-block;
    padding:5px 10px;
    color:#444;
    background:#f3f3f3;
    text-decoration:none;
}
a:after {
    content:'';
    position:absolute;
    background:green;
    display:block;
    height:2px;
    bottom:-2px;
    left:0;
    min-width:0;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
}

a:hover:after {
    min-width:100%;
}

<a href="#">Hover button</a>

可能会添加更多特定于浏览器的 css 过渡，以更好地兼容多浏览器。有关这方面的更多信息，请查看HERE

jsFIDDLE

Answer 3

您可以使用缩放到 0.001 的伪元素并在悬停时将其缩放回 1。这种方法在另一个问题中有所描述：Expand border from center on hover

要使其从左侧扩展，您只需将变换原点更改为0 0：

a{
  display:inline-block;
}
a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform-origin:0 0;
  transform: scaleX(0.001);
  transition: transform 250ms ease-in-out;
}
a:hover:after {
  transform: scaleX(1);
}

<a>Benutzername:</a>

Answer 4

你可以使用定位伪元素

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>

Answer 5

你可以试试这个。

#divname {
position:absolute;
top:0;
height:500px;
}

#divname:hover {
position:absolute;
top:0;
height:600px;
}

这对我有用。