定位标记中的上标无法正常工作

Question

I have a link and a superscript in the link name. I get the superscript but it moved top with the underline as it is a link. i am trying to keep the underline in the place with the title and just raise the superscript only but running out of ideas.

i tried one trick but it works only in google chrome.

here is my code

   <A href="http://www.google.com/" target=_blank>Google<SUP style="BORDER-BOTTOM: white 1px solid; COLOR: white !important">®</SUP> search</A>

here is jsfiddle link https://jsfiddle.net/f582kmsj/

Answer 1

remove border from the sup element and add this to your styles:

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

By not specifying a color on the border, it will always match the color of the text and more-or-less mimic the default underline.

Answer 2

If you want to use inline styles, this will give you a single continuous underline:

<a href="http://www.google.com/" target="_blank">Google<sup style="display: inline-block; border-bottom: 1px solid; padding-bottom: 4px">®</sup> search</a>

Or as a CSS declaration:

a > sup {
  display: inline-block; 
  border-bottom: 1px solid; 
  padding-bottom: 4px
}

You may need to adjust the bottom padding according to your text size.