Styling the <sup> tag

Question

I was wondering if there's way to style the superscript tag without effecting the whole paragraph. so for example here what I'm trying to do is to remove the underline from the superscripts without removing it from the link title itself. I was able to change the size and color of the sup tag but text-decoration doesn't seem to be working unless I remove the underline from the whole link. So is there anyway to style the tag?

Thanks

Answer 1

A good place to start is to remove text-decoration from the a and replace it with border-bottom.

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}

<a href="#">The link itself<sup>&trade;</sup></a>

Update:

Another option if you have control over the markup is to wrap any text you want to style differently in a span or another semantically appropriate element such as u.

a {
  text-decoration: none;
}
a span {
  text-decoration: underline;
}

<a href="#"><span>The link itself</span><sup>&trade;</sup></a>

…or…

a {
  text-decoration: none;
}

<a href="#"><u>The link itself</u><sup>&trade;</sup></a>