覆盖带有下划线的另一个元素内的元素的下划线

Question

我的问题与How do I get this CSS text-decoration override to work?几乎完全相同。但是我看到这个问题已经有7年了，我想知道我们现在是否有任何实现这一目标的方法？

基本上我的结构看起来像这样：

<a href='abc'>
  This is underlined <span>But not this.</span>
 </a>
  

我只希望span下的文字不加下划线。我明白我可以使用border bottom来实现这个目标。或者从a标记中删除下划线，然后在span中插入我想要加下划线的文字。

我只是想知道7年后是否有办法覆盖子元素中的text-decoration: underline。

Answer 1

使用css实现您的目标。

a span {
    text-decoration: none !important;
    display: inline-block;
}

<a href='abc'>
  This is underlined <span>But not this.</span>
 </a>