从链接的一部分删除下划线

Question

加上这个:

a sup {
    text-decoration: none !important;
    color: red;

<a href="http:/example.com//">Example<sup class='tm'>&trade;</sup></a>

是否可以从<sup>元素中删除下划线?css显然是针对正确的元素(它将其变为红色)，但text-decoration被忽略了。是否有使用下划线仅部分的a标签?

Answer 1

问题是text-decoration传播到后代:

在内联元素上指定或传播到内联元素时，它会影响所有元素由该元素生成的框，并进一步传播到任何流内块级框，用于拆分内联[…]

对于建立内联格式上下文的块容器装饰被传播到一个匿名的内联元素块容器的所有流内内联级子元素。

对于所有其他元素，它被传播到任何流中的子元素。

但是有两个例外:流出和原子内联级后代:

注意，文本装饰不会传播到浮动和绝对定位子代，也不给内容原子内联级子类，如内联块和内联表。

因此，你可以在子节点上使用display: inline-block来防止父节点的text-decoration影响它。

a > sup {
  display: inline-block; /* Remove parent's text-decoration */
  color: red;
}

<a href="http:/example.com//">
  Example<sup class='tm'>&trade;</sup>
</a>