悬停时淡入边界

我想在悬停时淡入边框。我有以下内容，但它开始时什么都没有，然后变成1px的灰线(灰色是默认颜色)，最后变成2px的红线。

我哪里出错了？

a{ 
    border-bottom: none;
    transition: border-bottom 1s;
}
a:hover{
    border-bottom: 2px solid red;
}

<a href='#'>hover here</a>

---

解决方案

如果元素没有边框，则在悬停时会遇到一些问题，如页面移动、从头绘制边框等

解决方案：先尝试将边框设置为透明，这样它就在那里，但看不到：

a { 
    border-bottom: 2px solid transparent; /* <- here */
    transition: border-bottom 1s;
    text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
    border-bottom: 2px solid red;
}

<a href="">testing border</a>

编辑

实际上，您不需要再次声明整个边框，只需更改颜色：

a:hover {
    border-color: red; /* <-- just change the color instead */
}