如何仅在CSS中完成上标？
我有一个样式表，在其中用上标字符标记了外部链接，但是我很难使字符正确对齐。
我目前所拥有的看起来像这样：
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但这不起作用。
自然，<sup>只有content允许HTML的情况下，我才会使用-tag 。
仅在CSS中上标？
检出：http : //www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html
如果看起来像您想要“ vertical-align：text-top”
相关或可能不相关，将上标用作HTML元素或文本中的span + css可能会导致本地化问题-在本地化程序中。
例如，让我们说“3 次第三方软件”：
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
译者如何翻译“ rd”？他们可以将其保留为几种西里尔语言为空，但其他外来或RTL语言呢？
在这种情况下，最好避免使用上标并使用完整的措辞，例如“第三方软件”。或者，如此处其他注释中所述，通过jQuery在上标中添加加号。
这是sup使用的确切方法：
.superscript{
vertical-align:super;
font-size:smaller;
}
通过谷歌浏览器chrome检查元素发现了这一点。
我不确定这是否相关，但是²由于我无法在标记内添加任何其他html标记，因此我已经解决了HTML实体的问题 <label>。因此，这个想法是使用ASCII代码而不是CSS或HTML标签。
CSS属性font-variant-position正在考虑中，并且最终可能是该问题的答案。截至2017年初，仅Firefox支持它。
.super {
font-variant-position: super;
}
参见MDN。
http://htmldog.com/articles/superscript/本质上：
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知，在实践中效果很好。
CSS文档包含适用于所有HTML构造的行业标准CSS。那就是：大多数的网页浏览器，这些天没有明确处理SUB，SUP，B，I等等-他们（有点八九不离十）被转换成SPAN适当的CSS属性的元素，渲染引擎只与交易。
该页面为附录D。HTML4的默认样式表
您想要的位是：
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
以下摘自Mozilla Firefox的内部html.css：
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
因此，在您的情况下，可能是这样的：
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
我正在制作一个页面，目的是使文本清晰易读，上标元素不会改变行的顶部和底部页边距-有以下发现：
line-height: 1.5em例如，如果您的主文本是，则应减小上标文本的行高，以使其正确显示。我用过line-height: 0.5em。
而且，vertical-align: super在大多数浏览器中都可以正常工作，但是在IE8中，当您有上标元素时，该行的其余部分将被向下推。因此，相反，我vertical-align: baseline与否定项一起使用top并position: relative达到了相同的效果，这似乎在浏览器中效果更好。
因此，添加到“本地实现”中：
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
如果要更改字体大小，则可能要停止使用以下规则缩小字体大小：
sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
您可以使用来做上标 vertical-align: super（加上相应的font-size减少项）。
但是，请务必阅读此处的其他答案，尤其是paulmurray和cletus的答案，以获取有用的信息。
老实说，我看不出仅在CSS中做上标/下标的意义。它没有方便的CSS属性，只有一堆本地实现，包括：
.superscript { position: relative; top: -0.5em; font-size: 80%; }
或使用垂直对齐，或者我相信其他方法。事实是，它开始变得复杂：
- CSS上标间距在行高上；
- 当心CSS为标/ Subcript为什么你可以说是不应该的风格上标/下标与CSS 可言 ;
第二点值得强调。通常，上标/下标实际上不是样式问题，但表示含义。
旁注：值得一提的是，该实体列表包含常见的数学上标和下标表达式，即使该问题与此无关。
sub / sup标签位于HTML和XHTML中。我只会用那些。
至于CSS的其余部分，：after伪元素和content属性并未得到广泛支持。如果您真的不想手动将其放入HTML中，那么我认为基于Javascript的解决方案是您的第二选择。使用jQuery，这很简单：
$(function() {
$("a.external").append("<sup>+</sup>");
};
这是另一个干净的解决方案：
这样，您仍然可以使用sup / sub标记，但是您已修复了它们的愚蠢行为，总是弄乱了段落行高。
现在，您可以执行以下操作：
而且您的段落行高也不应该搞砸。
在IE7，IE8，FF3.6，SAFARI4，CHROME5，OPERA9上测试
我使用进行了测试
p {line-height: 1.3;}（除非您希望行贴得太紧，否则行高是必须的），并且它仍然可以正常工作，因为“ -0.6em”的量很小，因此子行/子文本也适合该行高而且不要互相越过忘记了可能相关的详细信息，我总是在页面的第一行中使用DOCTYPE （特别是使用HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。因此，我不知道由于缺少DOCTYPE或未触发标准/几乎标准模式的DOCTYPE而导致浏览器处于怪异模式（或非标准模式）时，该解决方案是否能很好地工作。