锚标记中的上标无法正常工作

Question

我在链接名称中有一个链接和一个上标。我得到了上标，但它与下划线一起移动到顶部，因为它是一个链接。 我试图将下划线保留在标题所在的位置，并且只提高上标但没有想法。

我尝试了一个技巧，但它只适用于谷歌浏览器。

这是我的代码

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

这里是 jsfiddle 链接 https://jsfiddle.net/f582kmsj/

Answer 1

从 sup 元素中移除边框并将其添加到您的样式中：

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

通过不在边框上指定颜色，它将始终与文本的颜色相匹配，并且或多或少地模仿默认的下划线。

Answer 2

如果你想使用内联样式，这会给你一个连续的下划线：

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

或作为 CSS 声明：

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

您可能需要根据您的文字大小调整底部填充。