html - 删除 anchor 标记中跨度的下划线

This question already has answers here:

How do I not underline an element in a link?
                                
                                    （3个答案）
                                
                        
                                9个月前关闭。
            
                    
我有一个有趣的问题想解决。我有一个锚元素，里面有一些跨度文本元素

.link {
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
  

<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>

我正在尝试删除跨度underline上的.inside-text，并在悬停时仅在span外的文本下划线。我试过了

.text-inside {
  text-decoration: none !important;
}

但这似乎并不能解决问题

最佳答案

您需要添加display:inline-block以进行跨度

.link {
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.link:hover .inside-text{
  text-decoration: none;
  display:inline-block;
}

<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>

关于html - 删除 anchor 标记中跨度的下划线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55952033/