只在CSS上标?

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

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

我目前拥有的是这样的:

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

但这并不奏效。

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

当前回答

CSS文档包含了所有HTML结构的行业标准CSS等价物。也就是说:现在大多数web浏览器都没有显式地处理SUB, SUP, B, I等等——它们(有点)被转换成具有适当CSS属性的SPAN元素，而渲染引擎只处理这些。

这个页面是附录d。HTML 4的默认样式表

你想要的是:

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

2009-02-21 13:15:40

其他回答

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

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”是如此小的数量，也有了这个行高，子/子文本将适合，不会互相重叠。

忘记了一个可能相关的细节，我总是在我的页面的第一行使用DOCTYPE(特别是我使用HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01过渡// zh " "http://www.w3.org/TR/html4/loose.dtd">)。所以我不知道当浏览器处于quirkmode(或非标准模式)时，由于缺乏DOCTYPE或DOCTYPE不触发标准/几乎标准模式时，这个解决方案是否有效。

2010-08-23 19:52:30

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>