下划线 CSS3 过渡效果

Question

如何在 CSS3 中通过 hover 实现从左到右的下划线动画？

- ziltoid

Answer 1

这是一个非常棘手的问题。

我能想到的唯一解决方案是在:hover时过渡 border-bottom 或者实际上应该说我正在过渡 border-bottom、width 和 margin-right，以使 border-bottom 出现并同时保持链接对齐。

很难解释，所以我做了一个快速示例，它不完美，看起来有点混乱，但至少可以展示我的意思。:-)

FIDDLE

HTML

<a href="#">Link</a><a href="#">Link</a>

CSS

a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}

a:hover {
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

- Christofer Vilander

---

将宽度设置为0，使实际内容从链接中流出可能会对布局的其余部分产生副作用。我建议使用一个生成的元素（:after），将其绝对定位在链接底部，然后动画化该伪元素的宽度，而不是直接在链接上操作宽度。 - CBroe