CSS 过渡不适用于 <a> 标签答案

【问题标题】：CSS transition not applying to <a> tagCSS 过渡不适用于 <a> 标签
【发布时间】：2021-09-05 07:55:22
【问题描述】：

我正在尝试使用以下代码（用 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;
        }
}

任何帮助将不胜感激。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： css sass css-transitions

【解决方案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;
           
        }

&lt;a href="#"&gt;A Link&lt;/a&gt;

【讨论】：

谢谢。只是一个简单的问题，我尝试将这个“a”包装在一个 div 中，并将边框过渡应用到该 div 中。但是，div 的 :hover 样式从不适用。请参阅此示例：codepen.io/slatifi/pen/rNygOgZ。你知道为什么吗？
@Saif：对我有用，但它是白色的：D 试试 rgba(255,0,0)
哦，在我的主要项目中它不起作用，因为我应用了 position:absolute。在我删除它之后它起作用了！