悬停时淡入边框

Question

我希望在悬停时淡入边框.我有以下但它开始时没有任何东西然后去1px灰线(灰色是默认颜色),然后最终变为2px红线.

我出了什么问题？

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

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

Answer 1

当一个元素没有边框时,你添加悬停你面临一些问题,如页面移动,从头开始绘制边框等

解决方案:首先尝试将边框设置为透明,因此它在那里但无法看到:

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>