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
}

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

锚标记中的上标不能正常工作

2 个答案: