使用虛擬邊框將邊框底部消失

使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; 
}

來源

2015-08-23 user2252219

您需要添加position:relative到#toggle。這將使:: after僞元素相對於元素位置的定位。

編輯

每更新，你需要切換::after和:hover，所以#toggle:hover::after。這樣它就是「徘徊後的#toggle之後的僞元素」。

來源

2015-08-23 23:41:24 ryachza

@ user2252219已更新。 – ryachza

嗯。我放棄了這一步，但似乎沒有生效。我添加到OP我放什麼:) :) – user2252219

@ user2252219我認爲這個問題可能是'透明＃999'。這是什麼似乎爲我工作：http://jsfiddle.net/3uap9bo6/ – ryachza

您可以將您的a元素的顯示屬性設置爲inline-block，並將height屬性設置爲0.9em之類的值以將底部邊框更靠近，例如。

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

來源

2015-08-23 23:45:33 taTrifynor

使用虛擬邊框將邊框底部消失

回答

相關問題