CSS 转换不适用于 <a> 标签

Question

我正在尝试使用以下代码（在 SASS 中编写）为“a”标签创建转换，但是，转换似乎不适用。悬停时，它会立即添加底部边框，而当移除光标时，在没有过渡的情况下移除边框之前会有第二次延迟。

a {
        position: absolute;
        top: 1em;
        left: 1em;
        color: white;
        font-weight: 500;
        display: flex;
        align-items: center;
        text-decoration: none;
        border-bottom: white 0px solid;
        transition: all 2s ease-in-out;

        &:hover {
           border-bottom: white 1px solid;
        }
}

如有任何帮助，我们将不胜感激。

Answer 1

从 0px 到 1px 的过渡只是一步。如果你想让边框出现，尝试使用边框的不透明度。喜欢：

border-bottom: rgba(255,255, 255,0) 1px solid;

悬停时：

border-bottom: rgba(255,255,255,1) 1px solid;

a {
        position: absolute;
        top: 1em;
        left: 1em;
        color: red;
        font-weight: 500;
        display: flex;
        align-items: center;
        text-decoration: none;
        border-bottom: rgba(255,0,0,0) 1px solid;
        transition: all 2s ease-in-out;

       
}

a:hover {
            border-bottom: rgba(255,0,0,1) 1px solid;
           
        }

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

CSS 转换不适用于 <a> 标签

CSS transition not applying to <a> tag

css

sass

css-transitions