css - 使用伪使悬停时边框底部消失

Question

制作border-bottom悬停时消失。

<a id="toggle" href="#modal0">living in New York,</a>

#toggle {
transition: all .3s ease-out;
position: relative;
}

#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;    
left:0;
bottom: 4px;                    /* <- distance */
border-bottom: 2px solid #000;  
}

#toggle::after:hover{   
transition: all .3s ease-out;
border-bottom: solid transparent 1px
}

按照建议更改伪悬停

#toggle:hover::after{
border-bottom: 1px transparent #999; 
transition: all .3s ease-out; 
}

Answer 1

您需要将position:relative 添加到#toggle。这将使::after 伪元素的定位相对于元素的位置。

编辑

每次更新，您需要切换 ::after 和 :hover，所以 #toggle:hover::after。这样它就是“悬停时 #toggle 的伪元素之后”。