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

Question

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

这是我的代码：

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

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

<a>Benutzername:</a>

我该如何设计这个元素，使得border-bottom可以从左边一直延伸到右边?

- Skeptar

---

好的，你尝试过什么了吗？ - j08691

你的 CSS 选择器前面不应该有句号，因为你要定位的是一个元素，而不是一个类。 - APAD1

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>

- Paulie_D

---

你应该指出它在旧版IE中无法工作，因为当时不支持CSS3。 - flx

该 OP 已经在使用 transition，我认为 CSS3 在这里不是问题。 - Paulie_D

谢谢你的回答！ :) - Skeptar

这可能与问题无关，因为此转换很简单，但应注意使用宽度/高度过渡元素的大小比使用transform属性更昂贵（与性能相关）。在此处查看。 - web-tiki

Answer 2

您可以使用伪元素将其缩放为0.001，然后在悬停时将其缩放回1。这种方法在另一个问题中有描述：扩展边框以从中心悬停

要使其从左侧扩展，您只需要将变换原点更改为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>

- web-tiki

---

谢谢你的答案！ :) - Skeptar

Answer 3

我想你试图得到下面这个代码片段的效果。 我用一个样式化的<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 过渡效果，使其更加兼容多个浏览器。如需更多信息，请查看此处。 jsFIDDLE

- Paul

---

谢谢你的帮助！太完美了！ - Skeptar

Answer 4

如果有人想要延伸从中心开始的线，这里有一个解决方案：

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>

- Si7ius

Answer 5

你可以尝试这个。

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

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

这对我有用。

- Aaronstran

---

这个没有动画，也没有边框。 - j08691

对不起，我误解了他的意思，给那些试图帮助的人投反对票是没有任何作用的。他只需要添加一个边框并进行过渡即可。 - Aaronstran

实际上，像你发布的那样对一个答案进行负评是负评的确切目的。你自己承认你误解了 OP 的意思，而且你的回答也没有用处。不要把负评当成个人攻击。 - j08691

不是我的意思，如果添加一两个东西的话，这就是他所需要的。如果这不起作用，他可以使用另一个答案。 - Aaronstran