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悬停时”。

Answer 2

您可以将a-element的display属性设置为inline-block，并将height属性设置为0.9em，以便将底部边框移近，例如。

<a id="toggle" href="#modal0" style="display:inline-block;height:0.9em;">living in New York,</a>

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

2 个答案: