删除链接部分的下划线 [英] Remove underline from part of a link

问题描述

有了这个：

  a sup {text-decoration：none！important; color：red;  

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

>

是否可以从< sup> 元素中删除下划线？ css显然是针对正确的元素（它变为红色），但是 text-decoration 被忽略。

$

解决方案

问题是 text-decoration 传播给后代：

inline元素，它影响所有
由该元素生成的框，并进一步传播到任何
流程块级框分割内联[...]

对于建立内联格式化上下文的块容器，
装饰传播到包装
的匿名内联元素所有块容器的inline flow子级。

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

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

$请注意，文本装饰不会传播到浮动和
绝对定位的后代，也不会传播到原子
内联级后代的内容，例如内联块和

因此，您可以使用 display：inline-block

lang =jsdata-hide =true>

  a> sup {display：inline-block; / *删除父项的text-decoration * / color：red;}  

 < a href =http：/example.com //>示例 




With this:

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

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

Is it possible to remove the underline from the <sup> element? The css is clearly targeting the right element (it turns it red), but the text-decoration is ignored. Is there anyway use underline for only part of an a tag?

解决方案

The problem is that text-decoration propagates to descendants:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline [...]

For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container.

For all other elements it is propagated to any in-flow children.

But there are two exceptions: out-of-flow and atomic inline-level descendants:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Therefore, you can use display: inline-block on a child to prevent its parent's text-decoration from affecting it.

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

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

这篇关于删除链接部分的下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！