Question

如何才能在CSS中完成上标？

我有一个样式表，我用上标字符标记外部链接，但我很难正确对齐字符。

我目前的情况如下：

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

但它不起作用。

当然，我只会在<sup>允许使用HTML时使用content - 标记...

Answer 1

你可以使用vertical-align: super做上标，（加上font-size减少）。

但是，请务必在此处阅读其他答案，尤其是paulmurray和cletus，以获取有用的信息。

Answer 2

老实说，我没有看到在CSS中做上标/下标的重点。它没有方便的CSS属性，只是一堆本土的实现，包括：

.superscript { position: relative; top: -0.5em; font-size: 80%; }

或使用vertical-align或我确定其他方式。事情是，它开始变得复杂：

CSS superscript spacing行高;
Beware CSS for Superscript/Subcript关于为什么你可以说不应该用CSS 来标记上标/下标;

第二点值得强调。通常，上标/下标实际上不是造型问题，而是指示意义。

旁注：值得一提list of entities for common mathematical superscript and subscript expressions即使这个问题与此无关。

sub / sup标签是HTML和XHTML。我会用那些。

至于CSS的其余部分，：after伪元素和内容属性不受广泛支持。如果你真的不想手动将它放在HTML中我认为基于Javascript的解决方案是你的下一个最好的选择。使用jQuery，这很简单：

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Answer 3

CSS文档包含所有HTML结构的行业标准CSS等效项。也就是说：现在大多数网络浏览器都没有明确处理SUB，SUP，B，I等等 - 它们（有点排序）被转换为{{1具有适当CSS属性的元素，渲染引擎只处理它。

页面为Appendix D. Default style sheet for HTML 4

您想要的位是：

SPAN

Answer 4

我正在制作一个页面，其目的是使用清晰易读的文字，上标元素不会更改线条的上下边距 - 并带有以下观察结果：

例如，如果您的主要文字有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;
}

Answer 5

http://htmldog.com/articles/superscript/基本上：

position: relative;
bottom: 0.5em;
font-size: 0.8em;

据我所知，在实践中运作良好。

Answer 6

以下内容取自Mozilla Firefox的内部html.css：

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

所以，在你的情况下，它会是一些东西，比如：

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Answer 7

这是另一个干净的解决方案：

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

通过这种方式，你仍然可以使用sup / sub 标签，但修复了他们的愚蠢行为，总是搞砸了段落行高。

现在你可以这样做：

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

你的段落行高不应该搞砸了。

在IE7，IE8，FF3.6，SAFARI4，CHROME5，OPERA9上测试

我使用p {line-height: 1.3;}进行了测试（这是一个很好的线高，除非你想要你的线太贴近）并且它仍然可以工作，因为“-0.6em”是一个很小的数量，也与该线子/子文本适合的高度，不要相互重叠。

忘记可能相关的详细信息我总是在页面第1行中使用DOCTYPE（具体来说，我使用的是HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。因此，当浏览器处于quirkmode（或非标准模式）时，由于缺少DOCTYPE或没有触发标准/几乎标准模式的DOCTYPE，我不知道此解决方案是否有效。

Answer 8

如果要更改字体大小，可能需要使用此规则停止缩小尺寸：

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Answer 9

我不确定这是否相关，但我已解决了² HTML实体的问题，因为我无法在<label>标记内添加任何其他html标记。所以这个想法是使用ASCII代码而不是css或HTML标签。

Answer 10

CSS属性font-variant-position正在考虑之中，最终可能是这个问题的答案。截至2017年初，只有Firefox支持它。

.super {
    font-variant-position: super;
}

请参阅MDN。

Answer 11

尝试

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

或普通的“之后”

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

“。a.external：after”可以简化

或

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

使用“字体大小50％”-什么大小的50％？如果未在定义上标之前的文本大小的某些标记中使用此标记，则此标记可能无法很好地工作。

如果您使用“ font-size：1em;”那么必须确定字体大小，而无需引用定义链接文本大小的标记，除非将链接文本设置为100％并且上标是该100％的50％。

使用“字体大小：1em；”实际设置字体大小基准。

如果要使上标字体小于链接文本，请设置较小的“垂直对齐”大小

如果要使上标字体与链接文本的大小相同，请将“垂直对齐”的大小设置为字体大小

要与链接文本对齐，您需要将“ margin”设置为与链接文本相同（左，中，右，对齐）。

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

应该类似于下面的带有^上标

的示例链接

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

或

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

或

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

或

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

如...

Superscript in CSS only? +

或

Superscript in CSS only?您明白了

Answer 12

退房：http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

如果你想要“vertical-align：text-top”

Answer 13

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Answer 14

以下是sup使用的确切方式：

.superscript{
    vertical-align:super;
    font-size:smaller;
}

通过谷歌浏览器检查元素找到了这个。

Answer 15

相关或可能不相关，使用上标作为HTML元素或文本中的span + css可能会导致本地化问题-在本地化程序中。

例如，假设“ 3 ^rd派对软件”：

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

翻译人员如何翻译“ rd”？他们可以将其保留为几种西里尔语言为空，但是其他外来或RTL语言呢？

在这种情况下，最好避免使用上标并使用完整的措辞，例如“第三方软件”。或者，如此处其他评论所述，通过jQuery在上标中添加加号。

只有CSS的上标？

15 个答案: