这里我用bootstrap 5来创建我的导航栏，当屏幕变小时，它会折叠。所以我在导航元素上做了一个小的悬停效果。然而，当它们折叠时，我的悬停效果会占用整个空间，因为你可以看到结果，我只想让悬停效果只在单词下面。我试图修复这个问题，你可以在CSS代码的末尾看到我的解决方案，但它不起作用。第一个我尝试了几种方法，但都不起作用，在CSS代码中，我把我的解决方案留在了最后。
vwkv1x7d1#
在CSS中：你让李拿显示：块，所以它占据了整个屏幕的宽度。display：inline-block应该可以解决这个问题并减小max-width。
@media (max-width:991px) { ul li::after { content: ""; height: 2px; background-color: #009688; margin: auto; display: inline-block; width: 0%; transition: 1s; } ul li:hover::after { max-width: 20%; cursor: pointer; }
1条答案
按热度按时间vwkv1x7d1#
在CSS中：
你让李拿显示：块，所以它占据了整个屏幕的宽度。display：inline-block应该可以解决这个问题并减小max-width。