仅CSS上标?

你可以用上标 vertical-align: super ,(加上随行人员) font-size 减少)。

阅读其他答案 paulmurray 和 cletus ,以获取有用的信息。

老实说,我不认为只在CSS中使用上标/下标有什么意义。它没有方便的CSS属性,只有一系列自主开发的实现,包括:

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

或者使用垂直对齐,或者我确信其他方式。问题是,事情开始变得复杂起来:

• CSS superscript spacing 在线高度;
• Beware CSS for Superscript/Subcript 完全

第二点值得强调。通常上标/下标实际上不是样式问题,而是表示含义。

旁注: 这一点值得一提 list of entities for common mathematical superscript and subscript expressions

sub/sup标记采用HTML和XHTML格式。我会用那些。

至于CSS的其余部分:after伪元素和content属性没有得到广泛支持。如果您真的不想手动将其放入HTML中,我认为基于Javascript的解决方案是您的下一个最佳选择。使用jQuery,这非常简单:

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

CSS文档包含适用于所有HTML构造的行业标准CSS。也就是说:现在大多数web浏览器都没有显式地处理 SUB SUP , B I 等等——它们(有点)被转换成 SPAN

这一页是 Appendix D. Default style sheet for HTML 4

您需要的位是:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

我在一个页面上工作,目的是使文本清晰易读,上标元素不会改变行的上下边距,观察结果如下:

如果你的主要文本是 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;
}

http://htmldog.com/articles/superscript/

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

据我所知,在实践中效果很好。

以下内容摘自Mozilla Firefox的内部html.css:

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

所以,在你的情况下,它会是这样的:

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

这是另一种干净的解决方案:

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 */

这样你 但是你 修正了他们愚蠢的行为,总是把段落的行高搞砸 .

现在你可以做:

  <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”是一个非常小的量,同样在这个线条高度下,子/子文本将适合并且不会相互重叠。

我的页面的第一行 (具体来说,我使用HTML4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> )。因此,我不知道当浏览器由于缺少DOCTYPE或DOCTYPE未触发标准/几乎标准模式而处于quirkmode(或非标准模式)时,此解决方案是否能正常工作。

如果要更改字体大小,可能需要使用以下规则停止缩小大小:

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

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

如果看起来您想要“垂直对齐:文本顶部”

我不确定这是否相关,但我已经解决了我的问题 ² HTML实体,因为我无法在 <label> 标签因此,我们的想法是使用ASCII代码,而不是css或HTML标记。

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

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

看见 MDN .

尝试

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

或者简单地说“之后”

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

“.a.外部:之后”可以简化

或

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

使用“字体大小50%”-什么大小的50%?如果不在上标之前定义文本大小的标记中使用,这可能无法正常工作。。。

使用“字体大小:1em;”实际上设置了字体大小基线。

如果您希望上标字体与链接文本的大小相同,请将“垂直对齐”大小设置为与字体大小相同

要与链接文本对齐,需要将“边距”设置为与链接文本相同(左、中、右、对齐)。

.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? +

仅CSS上标?

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

例如,让我们说“3” 派对软件“:

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

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

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

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

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

通过google chrome inspect元素找到这个。