只在CSS上标?

我怎么能得到上标做，只有在CSS?

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

我目前拥有的是这样的:

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

但这并不奏效。

当然，我会使用<sup>-标签，只有当内容允许HTML…

当前回答

sup的用法如下:

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

发现这通过谷歌铬检查元素。

其他回答

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

例如，我们说“第三方软件”:

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

译者如何翻译“rd”?他们可以为一些西里尔语言留空，但其他外来语言或RTL语言呢?

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

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

我在一个页面上工作，目的是有清晰易读的文本，上标元素不改变行顶部和底部的空白-以下是观察结果:

如果你的主文本有行高:例如1.5em，你应该降低上标文本的行高以使其正确显示。我使用线高:0.5em。

此外，vertical-align: super在大多数浏览器中都运行良好，但在IE8中，当你有一个上标元素时，该行其余部分会被下推。因此，我使用vertical-align: baseline加上负的顶部和position: relative来达到同样的效果，这似乎在各种浏览器中都能更好地工作。

因此，要添加到“本地实现”:

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

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

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

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

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

try

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

或者简单的“after”

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

”。。外部:after”可以简化

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

使用“字体大小50%”-什么大小的50% ?这可能不会很好地工作，如果不使用在一些标签定义文本大小之前的上标…

如果你使用"font-size: 1em;"，那么字体大小是确定的，没有引用定义链接文本大小的标签，除非链接文本设置为100%，上标是100%的50%。

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

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

设置“vertical-align”大小与字体大小相同，如果你想让上标字体与链接文本大小相同

要与链接文本对齐，您需要设置与链接文本相同的“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>