3

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?

Matt Burland
  • 44,552
  • 18
  • 99
  • 171
  • 3
    `sup { display: inline-block }`. – Oriol Jul 08 '15 at 15:02
  • @Oriol: That actually works. Not sure the dupe applies here. The underline is applied to the `a` tag and cascades to the child elements even if they are marked not to. – Matt Burland Jul 08 '15 at 15:06
  • 1
    It's not cascading. It's like backgrounds: if you use `background: transparent` on an element, you will see the background of its parent. Here it happens the same: you can remove the decoration, but the decoration of the parent is still visible. There are some ways to prevent this behavior, as I explained [here](http://stackoverflow.com/a/17347691/1529630). – Oriol Jul 08 '15 at 15:10
  • Now I think you are right and the questions are different enough, even if the underlying issue is the same. [Unable to un-line-through a nested element](http://stackoverflow.com/q/6566653/1529630) is better. – Oriol Jul 08 '15 at 15:21
  • @Oriol: Ok. If you want to add your answer, I'll accept it. My alternative of setting `text-decoration: none;` on the `a` and then putting the part I want underlined in a `span` and setting its `text-decoration: underline` works too, but is clearly inferior. – Matt Burland Jul 08 '15 at 15:25

1 Answers1

12

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513