删除锚标签中跨度的下划线

Question

我要解决一个有趣的问题。我的锚元素里面有一些span文本元素

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

但似乎无法解决问题

Answer 1

您需要添加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>