<sup> 标签的样式答案

【问题标题】：Styling the <sup> tag<sup> 标签的样式
【发布时间】：2016-01-29 23:08:42
【问题描述】：

我想知道是否有办法在不影响整个段落的情况下设置上标标记的样式。因此，例如，在这里我要做的是从上标中删除下划线，而不将其从链接标题本身中删除。我能够更改 sup 标记的大小和颜色，但文本装饰似乎不起作用，除非我从整个链接中删除下划线。那么有没有给标签设置样式？

谢谢

【问题讨论】：

【解决方案1】：

一个好的开始是从a 中删除text-decoration 并将其替换为border-bottom。

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

&lt;a href="#"&gt;The link itself&lt;sup&gt;&amp;trade;&lt;/sup&gt;&lt;/a&gt;

更新：

如果您可以控制标记，另一种选择是将您想要设置不同样式的任何文本包装在 span 或其他语义适当的元素（例如 u）中。

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

&lt;a href="#"&gt;&lt;span&gt;The link itself&lt;/span&gt;&lt;sup&gt;&amp;trade;&lt;/sup&gt;&lt;/a&gt;

…或…

a {
  text-decoration: none;
}

&lt;a href="#"&gt;&lt;u&gt;The link itself&lt;/u&gt;&lt;sup&gt;&amp;trade;&lt;/sup&gt;&lt;/a&gt;

【讨论】：

谢谢先生。这几乎正是我所希望的。边框跟随上标，但看起来比之前好多了
@eimansepanta 我已经添加了其他实现该结果的选项，但您必须添加额外的标记。您也可以通过对sup 元素应用等于其宽度的负边距来获得相同的结果：a sup { margin-right: -13px; } 但是您必须提前知道元素的宽度，如果您想更改font-size 或sup 的内容。还有许多其他方法可以做到这一点，但这些想法应该让你开始。尝试各种属性并通过反复试验来学习。