0

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 enter image description here

1 Answers1

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>
gfullam
  • 11,531
  • 5
  • 50
  • 64
  • Thank you sir. that's almost exactly what I was hoping for. the border follows the superscript but it looks much better that before –  Oct 29 '15 at 19:26
  • 1
    @eimansepanta I have added other options that achieve that result, but you have to add additional markup. You could also achieve the same result by applying a negative margin to the `sup` element equal to its width: `a sup { margin-right: -13px; }` But then you have to know the width of the element in advance, which would cause problems if you want to change the font-size or the content of `sup`. There are numerous other ways to do the same, but these ideas should get you started. Experiment with various properties and learn by trial and error. – gfullam Oct 30 '15 at 14:10